/* The studio backdrop stays dusty pink in both light and dark mode by design. */
:root {
--wall: #dab2b1;
--floor: #c99e9f;
--ink: #3b1d29;
--ink-soft: #6b4452;
--plum: #5e1f3c;
--page: #eacfce;
--glass: rgba(255, 250, 248, .58);
color-scheme: light;
box-sizing: border-box;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wall: #d8afae; } }
:root[data-theme="dark"] { --wall: #d8afae; }
:root {
/* Type scale: golden ratio. Every size is 17px x phi^(n/2): whole steps multiply by 1.618,
half steps by its square root (1.272), so headings, text and labels all relate by the same proportion. */
--fs-xs: 0.8353rem; /* 13.4px */
--fs-base: 1.0625rem; /* 17.0px */
--fs-md: 1.3515rem; /* 21.6px */
--fs-lg: 1.7192rem; /* 27.5px */
--fs-xl: 2.1868rem; /* 35.0px */
--fs-2xl: 2.7817rem; /* 44.5px */
--fs-3xl: 3.5383rem; /* 56.6px */
--fs-4xl: 4.5008rem; /* 72.0px */
--fs-5xl: 5.7251rem; /* 91.6px */
--lh: 1.618;
}
html { background: var(--page); scroll-behavior: smooth; scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: linear-gradient(to bottom, #cfa5a6 0, #e2c1c0 560px, var(--page) 100%);
font-family: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
font-size: var(--fs-base); line-height: var(--lh);
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
/* ---------- studio backdrop ---------- */
.hero {
--px: 0; --py: 0; /* cursor position, -1..1, set by script */
position: relative;
height: 100vh; height: 100svh;
min-height: 560px;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(ellipse 48% 58% at 50% 36%, rgba(255, 240, 236, .78) 0%, rgba(255, 240, 236, .28) 45%, transparent 72%),
radial-gradient(ellipse 70% 14% at 50% 74%, rgba(255, 236, 232, .32) 0%, transparent 70%),
linear-gradient(to bottom, var(--wall) 0%, #d7adad 58%, var(--floor) 78%, #cfa5a6 100%);
}
.hero::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 75% 80% at 50% 45%, transparent 55%, rgba(110, 58, 70, .28) 100%);
}
/* ---------- header: name and a one-line intro, top left ---------- */
.site-header {
position: fixed; z-index: 20; top: 0; left: 0; right: 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: calc(clamp(22px, 4.5vh, 44px) + env(safe-area-inset-top, 0px)) clamp(22px, 4vw, 56px) 14px;
transition: padding .4s cubic-bezier(.2, .8, .2, 1), background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
border-bottom: 1px solid transparent;
}
.site-header.solid {
padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 12px;
background: rgba(246, 228, 227, .72);
-webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
border-bottom-color: rgba(255, 255, 255, .6);
box-shadow: 0 12px 30px -22px rgba(92, 38, 56, .5);
}
.brand { color: inherit; text-decoration: none; display: block; }
.brand:focus-visible { outline: 2px solid var(--plum); outline-offset: 6px; border-radius: 4px; }
.masthead {
margin: 0;
display: flex; gap: .32em;
font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
font-weight: 700;
font-size: clamp(var(--fs-md), 2.1vw, var(--fs-xl));
line-height: 1;
transition: font-size .4s cubic-bezier(.2, .8, .2, 1);
letter-spacing: .06em;
color: var(--ink);
}
.masthead .word { display: inline-flex; clip-path: inset(-12% -6% -2% -6%); }
.masthead .ch { display: inline-block; animation: letterIn .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--i) * 40ms); }
@keyframes letterIn { from { transform: translateY(110%); } to { transform: none; } }
.tagline {
margin: 10px 0 0;
font-size: var(--fs-xs); font-weight: 500; letter-spacing: .01em;
color: var(--ink-soft);
animation: appear .8s .8s cubic-bezier(.2, .8, .2, 1) both;
max-height: 3em; overflow: hidden;
transition: max-height .4s ease, margin .4s ease, opacity .3s ease;
}
.site-header.solid .masthead { font-size: var(--fs-base); }
.site-header.solid .tagline { max-height: 0; margin-top: 0; opacity: 0; }
.mini-nav { display: flex; gap: 10px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.site-header.solid .mini-nav { opacity: 1; transform: none; pointer-events: auto; }
.mini-nav a { width: 38px; height: 38px; display: block; border-radius: 12px; outline: none; }
.mini-nav .tile { border-radius: 12px; }
.mini-nav .tile::before { border-radius: 12px 12px 50% 50% / 12px 12px 8px 8px; }
.mini-nav .tile svg { width: 20px; height: 20px; }
.mini-nav a:hover .tile, .mini-nav a:focus-visible .tile { transform: translateY(-2px); }
.mini-nav a:focus-visible .tile { outline: 2px solid var(--c2); outline-offset: 3px; }
/* ---------- the set: soft window light on the wall ---------- */
.set { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.window-light {
position: absolute; left: 12vw; top: -4vh;
width: min(62vh, 52vw); height: auto;
opacity: .5; mix-blend-mode: screen;
filter: blur(16px);
transform: skewX(-16deg) rotate(9deg);
transform-origin: 0 0;
animation: drift 26s ease-in-out infinite alternate, clouds 11s ease-in-out infinite;
}
@keyframes drift { from { translate: 0 0; } to { translate: 3.5vw 2vh; } }
@keyframes clouds { 0%, 100% { opacity: .5; } 40% { opacity: .34; } 55% { opacity: .46; } }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
.window-light { width: 70vw; left: -6vw; top: -2vh; }
}
@media (prefers-reduced-motion: reduce) { .window-light { animation: none; } }
/* ---------- character ---------- */
.stage {
--ch: min(84vh, 114vw);
position: absolute; left: 50%; bottom: 0; z-index: 1;
height: var(--ch); aspect-ratio: 924 / 1152;
transform: translateX(-50%);
}
.figure {
appearance: none; border: 0; padding: 0; margin: 0; background: none;
position: absolute; inset: 0; width: 100%; height: 100%;
cursor: pointer; -webkit-tap-highlight-color: transparent;
perspective: 1400px;
/* soft shadow she casts on the backdrop behind her */
filter: drop-shadow(22px 14px 26px rgba(92, 42, 54, .26));
}
.figure:focus-visible { outline: none; }
.figure:focus-visible::after { content: ""; position: absolute; inset: 14% 22% 0; border-radius: 40% 40% 0 0; outline: 2px dashed var(--plum); outline-offset: 6px; }
.body {
position: absolute; inset: 0;
transform-origin: 50% 100%;
transform: translateX(calc(var(--px) * 2.4vh)); /* the whole body drifts toward the cursor's side */
transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
transform-style: preserve-3d;
}
.breath { position: absolute; inset: 0; transform-origin: 50% 100%; }
.view.gl { opacity: 0; transition: opacity .3s ease; }
.figure.live .view.gl { opacity: 1; }
.figure.live .view.still { opacity: 0; }
.view {
position: absolute; inset: 0; width: 100%; height: 100%;
overflow: visible;
transform-origin: 50% 100%;
user-select: none; -webkit-user-drag: none; pointer-events: none;
}
@keyframes hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-2.2%); } 60% { transform: translateY(0.4%); } }
.figure.hop .body > .breath { animation: hop .5s cubic-bezier(.3, .7, .4, 1); }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.004, 1.008); } }
.bubble {
position: absolute; left: 63%; top: 13%; z-index: 3;
padding: 12px 18px 13px;
border-radius: 18px 18px 18px 6px;
background: rgba(255, 249, 247, .86);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, .75);
box-shadow: 0 16px 30px -14px rgba(92, 38, 56, .5);
font-size: clamp(var(--fs-base), 2.3vh, var(--fs-md)); font-weight: 600; color: var(--ink); white-space: nowrap;
opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 0 100%;
transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.5, .5, 1);
pointer-events: none;
}
.bubble.show { opacity: 1; transform: none; }
.bubble span { font-weight: 500; color: var(--ink-soft); }
@media (max-width: 760px), (max-aspect-ratio: 1/1) { .bubble { left: 58%; top: 10%; } }
/* ---------- icon navigation ---------- */
.icons { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.icon {
--gap: min(46vh, 34vw);
position: absolute;
width: 88px; height: 88px; margin: -44px 0 0 -44px;
text-decoration: none; color: var(--ink);
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.icon.l { left: calc(50% - var(--gap)); }
.icon.r { left: calc(50% + var(--gap)); }
.icon.t { top: 38%; }
.icon.b { top: 62%; }
.tile {
width: 100%; height: 100%;
display: grid; place-items: center;
position: relative;
border-radius: 26px;
background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
border: 1px solid rgba(255, 255, 255, .35);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .55),
inset 0 -12px 20px rgba(0, 0, 0, .10),
0 22px 34px -14px var(--glow),
0 4px 10px rgba(92, 38, 56, .12);
overflow: hidden;
transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, background .35s ease;
}
/* glossy highlight across the top half, like a lit app icon */
.tile::before {
content: ""; position: absolute; inset: 0 0 48% 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0));
border-radius: 26px 26px 50% 50% / 26px 26px 18px 18px;
pointer-events: none;
}
.tile svg { position: relative; width: 42px; height: 42px; overflow: visible; filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .15)); }
.tile svg .ln { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tile svg .fl { fill: rgba(255, 255, 255, .3); }
.tile svg .wh { fill: #fff; }
.tile svg .ink { stroke: var(--c2); }
.tile svg .dot { fill: #fff; }
/* one colour per section, chosen to sit well against dusty pink */
.work { --c1: #f5c97c; --c2: #d98e3f; --glow: rgba(180, 105, 40, .55); }
.proj { --c1: #8fc3b0; --c2: #4b8a7a; --glow: rgba(50, 110, 95, .5); }
.recs { --c1: #d97a9b; --c2: #9b3561; --glow: rgba(130, 40, 80, .5); }
.contact { --c1: #a3b3ec; --c2: #5b6cc2; --glow: rgba(70, 80, 170, .5); }
.cafe { --c1: #dcb892; --c2: #9c6b46; --glow: rgba(120, 75, 40, .5); }
.lilac { --c1: #c9a6d8; --c2: #80599a; --glow: rgba(100, 60, 130, .5); }
.tile svg .ac { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); transform-box: fill-box; transform-origin: center; }
.icon:hover .tile, .icon:focus-visible .tile {
transform: translateY(-5px);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .7),
inset 0 -12px 20px rgba(0, 0, 0, .08),
0 30px 42px -14px var(--glow),
0 6px 12px rgba(92, 38, 56, .14);
}
/* each glyph does one small thing that hints at its section */
.icon:hover .clock-hand, .icon:focus-visible .clock-hand { transform: rotate(120deg); transform-origin: 24px 23px; transform-box: view-box; }
.icon:hover .code, .icon:focus-visible .code { transform: scale(1.12); }
.icon:hover .heart, .icon:focus-visible .heart { transform: scale(1.25); }
.icon:hover .plane, .icon:focus-visible .plane { transform: translate(2px, -2px); }
.clock-hand { transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); transform-origin: 24px 23px; transform-box: view-box; }
.icon:active .tile { transform: translateY(-1px) scale(.97); transition-duration: .1s; }
.icon:focus-visible .tile { outline: 2px solid var(--c2); outline-offset: 4px; }
/* tooltip: says what the section is when you hover or focus */
.tip {
position: absolute; left: 50%; top: calc(100% + 14px);
width: max-content; max-width: 220px;
padding: 10px 14px 11px;
border-radius: 14px;
background: rgba(255, 249, 247, .78);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, .7);
box-shadow: 0 14px 28px -12px rgba(92, 38, 56, .45);
text-align: center;
opacity: 0; transform: translate(-50%, -6px);
transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
pointer-events: none;
}
.tip::before {
content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px;
background: rgba(255, 249, 247, .92); border-left: 1px solid rgba(255, 255, 255, .7); border-top: 1px solid rgba(255, 255, 255, .7);
transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.tip strong { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.tip span { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-soft); }
.icon:hover .tip, .icon:focus-visible .tip { opacity: 1; transform: translate(-50%, 0); }
/* ---------- one orchestrated entrance ---------- */
@keyframes lightUp { from { filter: brightness(.86); } to { filter: none; } }
@keyframes rise { from { opacity: 0; transform: translateX(-50%) translateY(18px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero { animation: lightUp 1.2s ease-out both; }
.stage { animation: rise 1s .3s cubic-bezier(.2, .8, .2, 1) both; }
.icons .icon { animation: appear .8s 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.icons .icon.b { animation-delay: 1.42s; }
/* ---------- small screens ---------- */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
.masthead { font-size: var(--fs-md); }
.tagline { font-size: var(--fs-xs); margin-top: 7px; }
.site-header.solid .masthead { font-size: var(--fs-base); }
.mini-nav { gap: 7px; }
.mini-nav a { width: 32px; height: 32px; }
.mini-nav .tile svg { width: 17px; height: 17px; }
.stage { --ch: min(74vh, 110vw); }
.icons {
inset: auto 0 0 0; top: auto;
display: flex; justify-content: center; gap: clamp(10px, 4vw, 26px);
padding: 0 12px calc(30px + env(safe-area-inset-bottom, 0px));
}
.icon { position: relative; margin: 0; width: 66px; height: 66px; }
.tile, .tile::before { border-radius: 20px; }
.tile svg { width: 32px; height: 32px; }
.tip { top: auto; bottom: calc(100% + 14px); transform: translate(-50%, 6px); }
.tip::before { top: auto; bottom: -6px; border: 0; border-right: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.7); }
.icons .icon:first-child .tip { left: 0; transform: translate(0, 6px); }
.icons .icon:first-child .tip::before { left: 33px; }
.icons .icon:last-child .tip { left: auto; right: 0; transform: translate(0, 6px); }
.icons .icon:last-child .tip::before { left: auto; right: 21px; transform: rotate(45deg); }
.icon:hover .tip, .icon:focus-visible .tip { transform: translate(-50%, 0); }
.icons .icon:first-child:hover .tip, .icons .icon:first-child:focus-visible .tip,
.icons .icon:last-child:hover .tip, .icons .icon:last-child:focus-visible .tip { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero, .stage, .icons .icon, .masthead .ch, .breath, .tagline { animation: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.body { transform: none; transition: none; }
.tile, .clock-hand, .tile svg .ac { transition: none; }
.icon:hover .tile, .icon:focus-visible .tile { transform: none; }
}
body::after {
content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
opacity: .11; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* =====================================================================
Sections
===================================================================== */
.block { position: relative; padding: clamp(96px, 14vh, 150px) clamp(22px, 6vw, 80px) 0; }
.block.last { padding-bottom: clamp(80px, 12vh, 130px); }
.inner { max-width: 1080px; margin: 0 auto; }
.section-head { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(32px, 5vh, 52px); }
.section-head .tile { width: 62px; height: 62px; flex: none; border-radius: 19px; }
.section-head .tile::before { border-radius: 19px 19px 50% 50% / 19px 19px 12px 12px; }
.section-head .tile svg { width: 31px; height: 31px; }
h2 {
margin: 0;
font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
font-weight: 700; font-size: clamp(var(--fs-xl), 4.2vw, var(--fs-3xl)); line-height: 1.04; letter-spacing: -0.01em;
}
.section-head p { margin: 8px 0 0; font-size: var(--fs-base); line-height: var(--lh); color: var(--ink-soft); max-width: 40em; }
h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.005em; }
.card {
background: var(--glass);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, .65);
border-radius: 22px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 26px 44px -28px rgba(92, 38, 56, .5);
padding: clamp(22px, 3vw, 32px);
}
.card p { margin: 10px 0 0; font-size: var(--fs-base); line-height: var(--lh); color: var(--ink-soft); max-width: 62ch; }
/* ---------- work timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 46px; position: relative; display: grid; gap: 22px; }
.timeline::before {
content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
background: linear-gradient(to bottom, #f5c97c, #d98e3f 75%, rgba(217, 142, 63, 0));
}
.t-item { position: relative; }
.t-item::before {
content: ""; position: absolute; left: -39px; top: 30px; width: 16px; height: 16px; border-radius: 50%;
background: linear-gradient(160deg, #f5c97c, #d98e3f);
box-shadow: 0 0 0 5px rgba(245, 201, 124, .3), 0 4px 10px rgba(180, 105, 40, .35);
}
.card .t-meta { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: #a8612a; }
/* ---------- projects ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.project { display: flex; flex-direction: column; }
.num { font-family: "Bodoni Moda", Georgia, serif; font-weight: 700; font-size: var(--fs-xs); color: #4b8a7a; margin-bottom: 14px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.tags li { font-size: var(--fs-xs); font-weight: 600; padding: 5px 11px 6px; border-radius: 999px; background: rgba(75, 138, 122, .13); color: #35695c; }
.card .more { margin-top: auto; padding-top: 18px; }
.more a { font-weight: 600; font-size: var(--fs-xs); color: #35695c; text-decoration: none; border-bottom: 1.5px solid rgba(53, 105, 92, .35); }
.more a:hover, .more a:focus-visible { border-bottom-color: #35695c; outline: none; }
/* ---------- recommendations ---------- */
.quote { position: relative; padding-top: clamp(44px, 5vw, 56px); margin: 0; }
.quote::before {
content: "\201C"; position: absolute; top: 6px; left: clamp(20px, 2.8vw, 30px);
font-family: "Bodoni Moda", Georgia, serif; font-weight: 800; font-size: var(--fs-4xl); line-height: 1; color: #c05a80;
}
.quote blockquote { margin: 0; font-size: var(--fs-base); line-height: var(--lh); color: var(--ink); }
.quote figcaption { margin-top: 18px; font-size: var(--fs-xs); color: var(--ink-soft); }
.quote figcaption strong { display: block; color: var(--ink); font-weight: 600; }
/* ---------- contact ---------- */
.contact-card { text-align: center; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); }
.contact-card .tile { width: 70px; height: 70px; margin: 0 auto 22px; border-radius: 21px; }
.contact-card .tile::before { border-radius: 21px 21px 50% 50% / 21px 21px 13px 13px; }
.contact-card .tile svg { width: 34px; height: 34px; }
.contact-card p { margin: 14px auto 0; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 13px 20px 14px; border-radius: 999px;
font: 600 15.5px/1 "Albert Sans", sans-serif; text-decoration: none; color: var(--ink);
background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8);
box-shadow: 0 12px 24px -16px rgba(92, 38, 56, .5);
transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.primary { color: #fff; background: linear-gradient(160deg, #a3b3ec, #5b6cc2); border-color: rgba(255, 255, 255, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 28px -14px rgba(70, 80, 170, .6); }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); outline: none; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(91, 108, 194, .45); }
.site-footer { padding: 0 clamp(22px, 6vw, 80px) calc(40px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: var(--fs-xs); color: var(--ink-soft); }
/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (max-width: 760px) {
.grid { grid-template-columns: 1fr; }
.section-head { align-items: flex-start; }
.section-head .tile { width: 52px; height: 52px; border-radius: 16px; }
.section-head .tile svg { width: 26px; height: 26px; }
.timeline { padding-left: 38px; }
.t-item::before { left: -31px; }
.timeline::before { left: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-header .masthead { margin: 0; }
/* =====================================================================
Scrapbook layer: warm paper, washi tape, stickers and handwriting.
Everything above stays the same; this only restyles it.
===================================================================== */
:root {
--page: #f1dbd2; /* warm pink paper */
--paper: #fdf5ec; /* cream card stock */
--hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
--hand-ink: #7d3a52;
--sticker: #fffaf4;
--paper-grain: url("data:image/svg+xml;utf8,");
--fibres: url("data:image/svg+xml;utf8,");
}
body { background: var(--fibres), var(--paper-grain), var(--page); }
/* the scrapbook page that slides up over the home page has a torn top edge */
.journey::before {
content: ""; position: absolute; left: 0; right: 0; top: -29px; height: 30px; z-index: 3; pointer-events: none;
background: var(--fibres), var(--paper-grain), var(--page);
-webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 400px 100% repeat-x;
mask: url("data:image/svg+xml;utf8,") 0 0 / 400px 100% repeat-x;
filter: drop-shadow(0 -6px 10px rgba(90, 40, 40, .18));
}
/* notebook dot grid behind the sections */
.block {
position: relative; z-index: 1;
background-color: var(--page);
background-image: radial-gradient(circle at 1px 1px, rgba(125, 58, 82, .13) 1px, transparent 1.5px), var(--fibres), var(--paper-grain);
background-size: 24px 24px, auto, auto;
}
/* ---------- handwriting ---------- */
.tagline { font-family: var(--hand); font-size: clamp(var(--fs-base), 1.5vw, var(--fs-md)); font-weight: 600; letter-spacing: 0; color: var(--hand-ink); }
.section-head p {
font-family: var(--hand); font-size: clamp(var(--fs-md), 2vw, var(--fs-lg)); font-weight: 600; line-height: 1.2;
color: var(--hand-ink); rotate: -1.2deg; transform-origin: 0 50%;
}
.site-footer { font-family: var(--hand); font-size: var(--fs-md); color: var(--hand-ink); }
/* ---------- stickers: every icon tile gets a die-cut white edge and a little tilt ---------- */
.tile {
box-shadow:
0 0 0 4px var(--sticker),
inset 0 1.5px 0 rgba(255, 255, 255, .55),
inset 0 -12px 20px rgba(0, 0, 0, .10),
0 8px 16px -4px rgba(90, 40, 40, .32);
}
.icon .tile { transition: transform .35s cubic-bezier(.2, .8, .2, 1), rotate .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.icon.work .tile { rotate: -5deg; }
.icon.proj .tile { rotate: 4deg; }
.icon.recs .tile { rotate: 5deg; }
.icon.contact .tile { rotate: -4deg; }
.icon:hover .tile, .icon:focus-visible .tile {
rotate: 0deg;
box-shadow: 0 0 0 4px var(--sticker), inset 0 1.5px 0 rgba(255, 255, 255, .7), inset 0 -12px 20px rgba(0, 0, 0, .08), 0 16px 26px -8px rgba(90, 40, 40, .38);
}
.mini-nav .tile { box-shadow: 0 0 0 2.5px var(--sticker), inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 8px -2px rgba(90, 40, 40, .3); }
.mini-nav .work .tile { rotate: -4deg; } .mini-nav .proj .tile { rotate: 3deg; }
.mini-nav .recs .tile { rotate: -3deg; } .mini-nav .contact .tile { rotate: 4deg; }
.section-head .tile { rotate: -4deg; }
#projects .section-head .tile, #contact .section-head .tile { rotate: 4deg; }
/* tooltips and the speech bubble become little paper notes */
.tip { background: var(--paper-grain), var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 3px; box-shadow: 0 10px 20px -10px rgba(90, 40, 40, .45), 0 1px 2px rgba(90, 40, 40, .12); }
.tip::before { background: var(--paper); border-color: transparent !important; }
.tip span { font-family: var(--hand); font-size: var(--fs-base); line-height: 1.15; color: var(--hand-ink); }
.bubble {
font-family: var(--hand); font-size: var(--fs-lg); font-weight: 700; line-height: 1.05; color: var(--ink);
background: var(--paper-grain), var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none;
border: 0; border-radius: 4px 4px 4px 2px; padding: 12px 18px 14px;
box-shadow: 0 14px 24px -12px rgba(90, 40, 40, .5), 0 1px 2px rgba(90, 40, 40, .12);
rotate: -3deg;
}
.bubble span { font-weight: 600; color: var(--hand-ink); }
/* header bar once you scroll: a strip of cream paper with a stitched edge */
.site-header.solid {
background: var(--paper-grain), #fcf3ea;
-webkit-backdrop-filter: none; backdrop-filter: none;
border-bottom: 1.5px dashed rgba(125, 58, 82, .3);
box-shadow: 0 10px 22px -18px rgba(90, 40, 40, .55);
}
/* ---------- cards become paper, held on with washi tape ---------- */
.card {
position: relative;
background: var(--paper-grain), var(--paper);
-webkit-backdrop-filter: none; backdrop-filter: none;
border: 0; border-radius: 3px;
box-shadow: 0 1px 2px rgba(90, 40, 40, .14), 0 18px 30px -18px rgba(90, 40, 40, .42);
rotate: var(--tilt, 0deg);
transition: rotate .45s cubic-bezier(.2, .8, .2, 1), translate .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
.card:hover { rotate: 0deg; translate: 0 -3px; box-shadow: 0 1px 2px rgba(90, 40, 40, .14), 0 26px 38px -20px rgba(90, 40, 40, .48); }
.card::after {
content: ""; position: absolute; top: -13px; left: 50%; width: 104px; height: 28px; translate: -50% 0; rotate: -3deg;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 7px, transparent 7px 14px), var(--tape, rgba(233, 196, 142, .78));
clip-path: polygon(0 8%, 5% 0, 9% 10%, 14% 2%, 100% 0, 96% 12%, 100% 26%, 95% 44%, 100% 62%, 96% 80%, 100% 100%, 8% 100%, 3% 90%, 0 72%, 4% 52%, 0 32%);
opacity: .9; pointer-events: none;
}
#timeline { --tape: rgba(240, 190, 120, .75); }
#projects { --tape: rgba(150, 196, 178, .78); }
#recommendations { --tape: rgba(222, 142, 170, .72); }
/* tags look like little paper luggage labels */
.tags li { position: relative; border-radius: 3px 9px 9px 3px; padding-left: 20px; }
.tags li::before {
content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
background: var(--paper); box-shadow: inset 0 0 0 1px rgba(90, 40, 40, .2);
}
.tags li:nth-child(odd) { rotate: -1.5deg; }
.tags li:nth-child(even) { rotate: 1.5deg; }
/* ---------- projects: index cards ---------- */
.project {
background:
linear-gradient(to bottom, transparent 0 64px, rgba(192, 90, 128, .42) 64px 65.5px, transparent 65.5px),
repeating-linear-gradient(to bottom, transparent 0 27px, rgba(91, 108, 194, .13) 27px 28px) 0 66px / 100% calc(100% - 66px) no-repeat,
var(--paper-grain), var(--paper);
}
.grid > .project:nth-child(4n+1) { --tilt: -1deg; }
.grid > .project:nth-child(4n+2) { --tilt: .8deg; }
.grid > .project:nth-child(4n+3) { --tilt: .7deg; }
.grid > .project:nth-child(4n) { --tilt: -.9deg; }
.num { font-family: var(--hand); font-size: var(--fs-lg); font-weight: 700; color: #b0557a; line-height: 1; margin-bottom: 18px; }
/* ---------- recommendations: handwritten notes ---------- */
.quote blockquote { font-family: var(--hand); font-size: var(--fs-lg); font-weight: 500; line-height: 1.22; color: var(--ink); }
.grid > .quote:nth-child(odd) { --tilt: -1.4deg; }
.grid > .quote:nth-child(even) { --tilt: 1.2deg; }
/* ---------- contact: an airmail postcard with a stamp ---------- */
.contact-card {
border: 11px solid transparent; border-radius: 4px;
background:
var(--paper-grain) padding-box, linear-gradient(var(--paper), var(--paper)) padding-box,
repeating-linear-gradient(-45deg, #c05a80 0 14px, var(--paper) 14px 22px, #5b6cc2 22px 36px, var(--paper) 36px 44px) border-box;
--tilt: -.6deg;
}
.contact-card::after { display: none; }
.contact-card .tile {
position: absolute; top: 20px; right: 22px; margin: 0;
width: 80px; height: 94px; padding: 7px; border: 0; border-radius: 0; rotate: 6deg;
background: linear-gradient(160deg, var(--c1), var(--c2)) content-box, #fff;
box-shadow: none;
-webkit-mask: radial-gradient(4px at 4px 4px, #0000 97%, #000) -4px -4px / 11px 11px round, linear-gradient(#000 0 0) content-box;
mask: radial-gradient(4px at 4px 4px, #0000 97%, #000) -4px -4px / 11px 11px round, linear-gradient(#000 0 0) content-box;
}
.contact-card .tile::before { inset: 7px 7px 50% 7px; border-radius: 0; }
.contact-card h2 { margin-top: 6px; }
.btn { border-radius: 6px; background: var(--paper-grain), var(--paper); border: 0; outline: 1.5px dashed rgba(125, 58, 82, .4); outline-offset: -5px; box-shadow: 0 1px 2px rgba(90, 40, 40, .14), 0 10px 18px -12px rgba(90, 40, 40, .45); }
.btn.primary { outline-color: rgba(255, 255, 255, .7); }
.btn:focus-visible { outline: 2.5px solid #5b6cc2; outline-offset: 3px; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
.icons .icon.l, .icons .icon.r { left: auto; }
.icons .icon.t, .icons .icon.b { top: auto; }
}
@media (max-width: 760px) {
.contact-card .tile { width: 64px; height: 76px; padding: 6px; top: 12px; right: 12px; }
.contact-card .tile svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.card, .icon .tile { transition: none; }
.card:hover { translate: none; }
}
/* =====================================================================
Work timeline: pinned while you scroll, the track slides sideways,
and each milestone draws its stem and reveals its words as it arrives
===================================================================== */
.journey { padding: 0; height: 540vh; }
.j-pin {
position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
display: flex; flex-direction: column;
padding: clamp(84px, 12vh, 118px) 0 clamp(20px, 4vh, 44px);
}
.journey .inner { width: 100%; padding: 0 clamp(22px, 6vw, 80px); max-width: calc(1080px + 2 * clamp(22px, 6vw, 80px)); }
.journey .section-head { margin-bottom: 0; }
.j-viewport { flex: 1; min-height: 0; position: relative; }
.j-track {
position: absolute; top: 0; bottom: 0; left: 0;
display: flex; align-items: center; gap: 5vw;
padding: 0 5vw 0 max(6vw, calc((100vw - 1080px) / 2));
will-change: transform;
}
/* the rail: title top-left, period bottom-left, the line across the middle */
.j-rail { flex: none; position: relative; width: 300vw; height: min(64vh, 560px); }
.j-title, .j-period { position: absolute; left: 0; margin: 0; font-family: var(--hand); color: var(--hand-ink); }
.j-title { top: 4%; font-size: clamp(var(--fs-xl), 3.3vw, var(--fs-2xl)); font-weight: 700; line-height: .95; width: 6.5em; rotate: -2deg; }
.j-period { bottom: 4%; font-size: clamp(var(--fs-md), 2vw, var(--fs-lg)); font-weight: 600; }
.j-line { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: flex; align-items: center; }
.j-cap { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #d98e3f; box-shadow: 0 0 0 3px var(--sticker); }
.j-cap:last-child { margin-left: auto; }
/* footsteps instead of a plain line: laid down as you scroll */
.j-fill { height: 34px; width: var(--fill, 0%); background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='34' viewBox='0 0 76 34'%3E%3Cg fill='%23c47a3a' fill-opacity='.82'%3E%3Cg transform='translate(4 9) rotate(-5)'%3E%3Cpath d='M0 0a4.2 3.6 0 1 0 8.4 0a4.2 3.6 0 1 0-8.4 0z'/%3E%3Cpath d='M10.4 0c0-3 2.8-4.6 6.4-4.6 4.2 0 7.2 2 7.2 4.6s-3 4.6-7.2 4.6c-3.6 0-6.4-1.6-6.4-4.6z'/%3E%3C/g%3E%3Cg transform='translate(42 25) rotate(5)'%3E%3Cpath d='M0 0a4.2 3.6 0 1 0 8.4 0a4.2 3.6 0 1 0-8.4 0z'/%3E%3Cpath d='M10.4 0c0-3 2.8-4.6 6.4-4.6 4.2 0 7.2 2 7.2 4.6s-3 4.6-7.2 4.6c-3.6 0-6.4-1.6-6.4-4.6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 50% / 76px 34px repeat-x; }
.j-items { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.j-item { --r: 0; --r1: 0; --r2: 0; --r3: 0; --r4: 0; position: absolute; left: var(--x); top: 0; bottom: 0; width: min(24vw, 360px); }
.j-stem { position: absolute; left: 0; width: 2px; background: #d98e3f; border-radius: 2px; transform: scaleY(var(--r)); }
.j-dot {
position: absolute; left: 0; width: 18px; height: 18px; margin-left: -8px; border-radius: 50%;
background: linear-gradient(160deg, #f5c97c, #d98e3f);
box-shadow: 0 0 0 4px var(--sticker), 0 4px 8px rgba(180, 105, 40, .35);
transform: scale(var(--r));
}
.j-item.top .j-stem { top: 3%; bottom: 50%; transform-origin: 50% 100%; }
.j-item.top .j-dot { top: calc(3% - 9px); }
.j-item.bottom .j-stem { top: 50%; bottom: 3%; transform-origin: 50% 0; }
.j-item.bottom .j-dot { bottom: calc(3% - 9px); }
.j-text { position: absolute; left: 0; right: 0; padding-left: 26px; }
.j-item.top .j-text { top: 0; }
.j-item.bottom .j-text { bottom: 0; }
/* words rise out of a mask, like the lines of a split-text reveal */
.j-mask { display: block; overflow: hidden; padding-bottom: .08em; }
.j-mask > span { display: block; transform: translateY(calc((1 - var(--t, 0)) * 105%)); }
.j-date .j-mask > span { --t: var(--r1); }
.j-text h3 .j-mask > span { --t: var(--r2); }
.j-org .j-mask > span { --t: var(--r3); }
.j-desc .j-mask > span { --t: var(--r4); }
.j-date { margin: 0; font-family: "Bodoni Moda", "Didot", Georgia, serif; font-weight: 800; font-size: clamp(var(--fs-lg), 2.8vw, var(--fs-2xl)); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.j-text h3 { margin-top: 12px; font-size: clamp(var(--fs-base), 1.45vw, var(--fs-md)); }
.j-org { margin: 2px 0 0; font-family: var(--hand); font-size: var(--fs-md); font-weight: 600; line-height: 1.1; color: var(--hand-ink); }
.j-desc { margin: 10px 0 0; font-size: var(--fs-base); line-height: var(--lh); color: var(--ink-soft); max-width: 34ch; }
/* phones and short screens: no sideways scroll, the same story reads top to bottom */
@media (max-width: 760px), (max-height: 560px) {
.journey { height: auto; padding: clamp(96px, 14vh, 150px) 0 0; }
.j-pin { position: static; height: auto; overflow: visible; padding: 0; display: block; }
.journey .section-head { margin-bottom: 36px; }
.j-viewport { padding: 0 22px; }
.j-track { position: static; display: block; padding: 0; transform: none !important; }
.j-rail { width: auto; height: auto; }
.j-title, .j-period { position: static; }
.j-title { width: auto; margin-bottom: 4px; }
.j-period { margin-bottom: 26px; }
.j-line { left: -8px; right: auto; top: 118px; bottom: 6px; translate: none; width: 34px; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='76' viewBox='0 0 34 76'%3E%3Cg fill='%23c47a3a' fill-opacity='.82'%3E%3Cg transform='translate(9 4) rotate(85)'%3E%3Cpath d='M0 0a4.2 3.6 0 1 0 8.4 0a4.2 3.6 0 1 0-8.4 0z'/%3E%3Cpath d='M10.4 0c0-3 2.8-4.6 6.4-4.6 4.2 0 7.2 2 7.2 4.6s-3 4.6-7.2 4.6c-3.6 0-6.4-1.6-6.4-4.6z'/%3E%3C/g%3E%3Cg transform='translate(25 42) rotate(95)'%3E%3Cpath d='M0 0a4.2 3.6 0 1 0 8.4 0a4.2 3.6 0 1 0-8.4 0z'/%3E%3Cpath d='M10.4 0c0-3 2.8-4.6 6.4-4.6 4.2 0 7.2 2 7.2 4.6s-3 4.6-7.2 4.6c-3.6 0-6.4-1.6-6.4-4.6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 50% 0 / 34px 76px repeat-y; }
.j-cap, .j-fill { display: none; }
.j-items { position: static; }
.j-item { position: relative; left: auto; width: auto; padding: 0 0 34px 38px; --r: 1; --r1: 1; --r2: 1; --r3: 1; --r4: 1; }
.j-stem { display: none; }
.j-item.top .j-dot, .j-item.bottom .j-dot { top: 10px; bottom: auto; left: 9px; }
.j-text, .j-item.top .j-text, .j-item.bottom .j-text { position: static; padding: 0; }
.j-desc { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.j-item { --r: 1; --r1: 1; --r2: 1; --r3: 1; --r4: 1; }
.j-fill { width: 100%; }
}
/* =====================================================================
Hero: the character lives in a phone, with an about column beside it
===================================================================== */
.hero-grid {
position: relative; z-index: 1; height: 100%;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center; gap: clamp(28px, 5vw, 80px);
max-width: 1180px; margin: 0 auto;
padding: clamp(40px, 7vh, 80px) clamp(22px, 5vw, 64px) clamp(40px, 7vh, 70px);
}
.phone-col { position: relative; height: 100%; display: grid; place-items: center; }
/* the phone */
.phone {
--pw: min(calc(min(76vh, 720px) * .4615), 86vw);
position: relative; width: var(--pw); aspect-ratio: 9 / 19.5;
padding: calc(var(--pw) * .035);
border-radius: calc(var(--pw) * .16);
background: linear-gradient(150deg, #5a3a47 0%, #2b1720 38%, #1e0f16 70%, #4a2f3a 100%);
box-shadow:
inset 0 0 0 1.5px rgba(255, 220, 228, .28),
inset 0 0 0 5px #1a0c12,
0 2px 3px rgba(40, 10, 20, .3),
30px 40px 60px -26px rgba(80, 30, 45, .55),
10px 18px 30px -18px rgba(80, 30, 45, .45);
animation: phoneIn 1s .3s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes phoneIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.phone-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(#4a2f3a, #2b1720); }
.phone-btn.vol { left: -3px; top: 20%; height: 12%; }
.phone-btn.power { right: -3px; top: 25%; height: 15%; }
.screen {
position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate;
border-radius: calc(var(--pw) * .13);
/* the same lit dusty-pink studio as the page, as her wallpaper */
background:
radial-gradient(ellipse 80% 48% at 50% 38%, rgba(255, 240, 236, .75) 0%, rgba(255, 240, 236, .2) 55%, transparent 75%),
linear-gradient(to bottom, #dcb4b3 0%, #d4a9aa 60%, #c49597 100%);
}
.screen::after { /* glass glare */
content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%);
}
.status {
position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: calc(var(--pw) * .13);
display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--pw) * .08);
color: var(--ink); font-size: calc(var(--pw) * .045); font-weight: 600;
}
.island { position: absolute; left: 50%; top: calc(var(--pw) * .035); translate: -50% 0; width: 32%; height: calc(var(--pw) * .09); border-radius: 999px; background: #0d0508; }
.status-ico { display: flex; align-items: center; gap: 5px; }
.status-ico svg { height: calc(var(--pw) * .036); width: auto; fill: currentColor; }
/* character inside the screen */
.phone .stage {
--ch: auto; position: absolute; left: 50%; bottom: 0; z-index: 1;
width: 112%; height: auto; aspect-ratio: 924 / 1152;
transform: translateX(-50%); animation: none;
}
.phone .body { transform: translateX(calc(var(--px) * 1.1vh)); }
.phone .figure { filter: drop-shadow(12px 10px 16px rgba(92, 42, 54, .28)); }
.phone .bubble {
left: 50%; top: auto; bottom: 90%; translate: -50% 0; transform-origin: 50% 100%;
font-size: calc(var(--pw) * .085); max-width: 86%; white-space: nowrap;
}
.phone .bubble::after { display: none; }
/* the four section icons become the phone's app dock */
.phone .icons {
position: absolute; z-index: 4; inset: auto 5% calc(var(--pw) * .05) 5%;
display: flex; justify-content: space-between; gap: 0;
padding: calc(var(--pw) * .04) calc(var(--pw) * .05);
border-radius: calc(var(--pw) * .1);
background: rgba(255, 244, 240, .34);
-webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
pointer-events: auto;
}
.phone .icons .icon { position: relative; left: auto; top: auto; margin: 0; width: calc(var(--pw) * .17); height: calc(var(--pw) * .17); }
.phone .icon .tile { rotate: 0deg; border-radius: 26%; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 -10px 16px rgba(0, 0, 0, .1), 0 5px 10px -4px rgba(90, 40, 40, .4); }
.phone .icon .tile::before { border-radius: 26% 26% 50% 50% / 26% 26% 12% 12%; }
.phone .icon .tile svg { width: 56%; height: 56%; }
.phone .icon:hover .tile, .phone .icon:focus-visible .tile { transform: translateY(-3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), 0 10px 16px -6px rgba(90, 40, 40, .45); }
/* tooltips open upward, and the edge ones stay on screen */
.phone .tip { top: auto; bottom: calc(100% + 12px); transform: translate(-50%, 6px); max-width: min(210px, calc(var(--pw) * .8)); }
.phone .tip::before { top: auto; bottom: -6px; border: 0; }
.phone .icon:hover .tip, .phone .icon:focus-visible .tip { transform: translate(-50%, 0); }
.phone .icons .icon:first-child .tip { left: -4px; transform: translate(0, 6px); }
.phone .icons .icon:first-child .tip::before { left: calc(var(--pw) * .085); }
.phone .icons .icon:last-child .tip { left: auto; right: -4px; transform: translate(0, 6px); }
.phone .icons .icon:last-child .tip::before { left: auto; right: calc(var(--pw) * .085 - 12px); }
.phone .icons .icon:first-child:hover .tip, .phone .icons .icon:first-child:focus-visible .tip,
.phone .icons .icon:last-child:hover .tip, .phone .icons .icon:last-child:focus-visible .tip { transform: none; }
/* about column */
.about-col { max-width: 36em; animation: appear .9s .9s cubic-bezier(.2, .8, .2, 1) both; }
.hi {
margin: 0 0 .45em;
font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; font-weight: 800;
font-size: clamp(var(--fs-2xl), 4.6vw, var(--fs-4xl)); line-height: .98; letter-spacing: -0.015em; color: var(--ink);
}
.about-col > p:not(.hint) { margin: 0 0 1em; font-size: var(--fs-base); line-height: var(--lh); color: var(--ink); }
.now-card { --tilt: .8deg; margin-top: 26px; padding: 22px 26px 16px; max-width: 30em; }
.now-card .now-title { margin: 0 0 6px; font-family: var(--hand); font-size: var(--fs-lg); font-weight: 700; line-height: 1; color: var(--hand-ink); }
.now { list-style: none; margin: 0; padding: 0; }
.now li { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1.5px dashed rgba(125, 58, 82, .2); }
.now li:first-child { border-top: 0; }
.now-dot { grid-row: span 2; align-self: start; margin-top: 4px; width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 0 0 2.5px var(--sticker); rotate: -8deg; }
.now li:nth-child(2) .now-dot { rotate: 7deg; }
.now strong { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.now li > span:last-child { font-family: var(--hand); font-size: var(--fs-md); font-weight: 600; line-height: 1.1; color: var(--hand-ink); }
.hint { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; font-family: var(--hand); font-size: var(--fs-md); font-weight: 600; color: var(--hand-ink); rotate: -1.5deg; }
.hint-arrow { width: 54px; height: auto; flex: none; fill: none; stroke: var(--hand-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* phones and portrait windows: the phone first, the about text below it */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
.hero { height: auto; min-height: 100vh; min-height: 100svh; }
.hero-grid { grid-template-columns: 1fr; height: auto; padding: 44px 22px 70px; gap: 44px; }
.phone-col { height: auto; }
.phone { --pw: min(calc(min(70svh, 640px) * .4615), 78vw); }
.about-col { max-width: 34em; justify-self: center; }
.hint-arrow { rotate: 70deg; width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .phone, .about-col { animation: none; } }
/* lock-screen clock at the top of her phone, showing the visitor's own time */
.lock { position: absolute; z-index: 1; top: calc(var(--pw) * .17); left: 0; right: 0; text-align: center; color: var(--ink); pointer-events: none; }
.lock-date { margin: 0; font-family: var(--hand); font-size: calc(var(--pw) * .07); font-weight: 600; line-height: 1; color: var(--hand-ink); }
.lock-time { margin: calc(var(--pw) * .01) 0 0; font-family: "Bodoni Moda", "Didot", Georgia, serif; font-weight: 800; font-size: calc(var(--pw) * .24); line-height: 1; letter-spacing: -0.01em; opacity: .9; }
/* laptops with short screens: tighten the about column so it all fits */
@media (min-width: 861px) and (min-aspect-ratio: 1/1) and (max-height: 800px) {
.hi { font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl)); }
.about-col > p:not(.hint) { font-size: var(--fs-base); line-height: var(--lh); margin-bottom: .8em; }
.now-card { margin-top: 16px; padding: 16px 22px 8px; }
.now li { padding: 7px 0; }
.hint { margin-top: 14px; font-size: var(--fs-md); }
}
/* the name only appears in the header bar once you scroll past the hero; up top, "Hi, I'm Aleena" says it */
.site-header:not(.solid) .brand { opacity: 0; visibility: hidden; }
.site-header .brand { transition: opacity .35s ease, visibility .35s; }
/* =====================================================================
The home page stays put while the timeline slides up over it
===================================================================== */
.hero { position: sticky; top: var(--hero-top, 0px); z-index: 0; }
.hero::after { /* dims gently as the page covers it */
content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
background: #3c1420; opacity: calc(var(--cover, 0) * .32);
}
/* =====================================================================
Work timeline folders: each job is a soft lavender folder on the line
===================================================================== */
.folder {
--fw: min(15vw, 27vh, 214px);
position: absolute; left: 22px; width: var(--fw); aspect-ratio: 200 / 172;
padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink);
opacity: var(--r2, 0); translate: 0 calc((1 - var(--r2, 0)) * 26px);
rotate: var(--f-tilt, -2deg);
transition: rotate .4s cubic-bezier(.2, .8, .2, 1);
-webkit-tap-highlight-color: transparent;
}
.j-item.top .folder { top: 0; }
.j-item.bottom .folder { bottom: 0; --f-tilt: 2deg; }
.f-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 16px 16px rgba(90, 50, 90, .28)); }
.f-sheet { transform-box: view-box; transform-origin: 100px 120px; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.f-front { transform-box: view-box; transform-origin: 100px 160px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.folder:hover, .folder:focus-visible { rotate: 0deg; outline: none; }
.folder:hover .f-sheet, .folder:focus-visible .f-sheet { transform: translateY(-16px) rotate(-3deg); }
.folder:hover .f-front, .folder:focus-visible .f-front { transform: skewX(-3deg) scaleY(.97); }
.folder:focus-visible .f-art { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px #336699) drop-shadow(0 16px 16px rgba(90, 50, 90, .28)); }
.f-label {
position: absolute; left: 17%; right: 15%; top: 52%;
padding: 7px 9px 8px; background: var(--paper-grain), #fffaf6; border-radius: 4px;
box-shadow: 0 1px 2px rgba(80, 40, 70, .2); rotate: -1.5deg; pointer-events: none;
}
.f-date { display: block; font-family: "Bodoni Moda", "Didot", Georgia, serif; font-weight: 800; font-size: clamp(var(--fs-xs), 1.1vw, var(--fs-base)); line-height: 1; }
.f-role { display: block; margin-top: 4px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; }
.f-org { display: block; margin-top: 2px; font-family: var(--hand); font-size: clamp(var(--fs-xs), 1vw, var(--fs-base)); font-weight: 600; line-height: 1.05; color: var(--hand-ink); }
/* =====================================================================
The open folder: its pages come out as a stack of documents
===================================================================== */
.book-dialog { border: 0; padding: 0; background: none; max-width: none; max-height: none; width: 100%; height: 100%; overflow: visible; }
.book-dialog::backdrop { background: rgba(50, 26, 50, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.book-dialog[open] { display: grid; place-items: center; }
.book { position: relative; width: min(640px, 90vw); height: min(560px, 76vh); margin-bottom: 40px; }
.pages { position: absolute; inset: 0; }
/* each document sheet: soft colour, a folded top-right corner, a gentle shadow */
.sheet {
--i: 0; position: absolute; inset: 0;
filter: drop-shadow(0 18px 24px rgba(60, 30, 60, .3));
transform: translate(calc(var(--i) * 14px), calc(var(--i) * 10px)) rotate(calc(var(--i) * var(--fan, 2deg)));
transition: transform .6s cubic-bezier(.3, .9, .3, 1), opacity .4s ease;
animation: pullOut .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--n, 0) * 70ms);
}
.sheet:nth-child(even) { --fan: -2.2deg; }
.sheet.gone { transform: translate(-70%, -6%) rotate(-14deg); opacity: 0; pointer-events: none; }
@keyframes pullOut { from { transform: translateY(46vh) rotate(4deg); opacity: 0; } }
.page {
--fold: clamp(52px, 8vw, 74px);
position: absolute; inset: 0; overflow: hidden; cursor: pointer;
padding: clamp(40px, 6vh, 56px) clamp(26px, 6vw, 60px) 84px;
border-radius: 20px;
background: var(--paper-grain), var(--sheet, #d6c4ea);
clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}
.page::after { /* the folded corner */
content: ""; position: absolute; top: 0; right: 0; width: var(--fold); height: var(--fold);
background: #336699; border-radius: 0 0 0 14px;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.sheet:nth-child(3n+1) .page { --sheet: #d6c4ea; }
.sheet:nth-child(3n+2) .page { --sheet: #fbcdca; }
.sheet:nth-child(3n) .page { --sheet: #f49e8f; }
.pg-head { margin: 0 0 18px; font-family: var(--hand); font-size: clamp(var(--fs-lg), 3.2vw, var(--fs-2xl)); font-weight: 700; line-height: 1; color: #2f4f7a; rotate: -1.5deg; }
.pg-kicker { margin: 10px 0 0; font-family: var(--hand); font-size: var(--fs-lg); font-weight: 600; color: #2f4f7a; }
.pg-title { margin: 10px 0 0; font-family: "Bodoni Moda", "Didot", Georgia, serif; font-weight: 800; font-size: clamp(var(--fs-xl), 5.4vw, var(--fs-3xl)); line-height: .98; letter-spacing: -0.015em; color: var(--ink); }
.pg-org { margin: 16px 0 0; font-size: clamp(var(--fs-base), 1.6vw, var(--fs-md)); font-weight: 600; color: var(--ink); }
.pg-place { margin: 4px 0 0; font-size: var(--fs-base); color: var(--ink-soft); }
.pg-hint { position: absolute; left: clamp(26px, 6vw, 60px); bottom: 26px; margin: 0; font-family: var(--hand); font-size: var(--fs-md); font-weight: 600; color: #2f4f7a; rotate: -2deg; }
.pg-list { margin: 0; padding: 0 0 0 20px; max-width: 58ch; }
.pg-list li { margin: 0 0 14px; font-size: var(--fs-base); line-height: var(--lh); color: var(--ink); }
.pg-list li::marker { color: #336699; }
.pg-quote { margin: 0; max-width: 30ch; font-family: var(--hand); font-size: clamp(var(--fs-lg), 2.8vw, var(--fs-xl)); font-weight: 500; line-height: 1.12; color: var(--ink); }
.pg-by { margin: 22px 0 0; font-size: var(--fs-xs); color: var(--ink-soft); }
.pg-by strong { display: block; color: var(--ink); font-weight: 600; }
/* photos taped onto the page */
.snaps { display: flex; gap: clamp(18px, 3vw, 36px); align-items: flex-start; }
.snap { margin: 0; flex: 1; max-width: 230px; padding: 10px 10px 0; background: #fffdf9; box-shadow: 0 2px 4px rgba(60, 20, 30, .18), 0 12px 20px -12px rgba(60, 20, 30, .4); rotate: -3deg; position: relative; }
.snap:nth-child(2) { rotate: 2.5deg; margin-top: 18px; }
.snap::after {
content: ""; position: absolute; top: -11px; left: 50%; width: 70px; height: 22px; translate: -50% 0; rotate: -4deg;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px), rgba(51, 102, 153, .55);
}
.snap-img { display: grid; place-items: center; aspect-ratio: 1; background: #efe4dc center / cover no-repeat; }
.snap-empty { padding: 10px; text-align: center; font-family: var(--hand); font-size: var(--fs-base); line-height: 1.15; color: #8a7a92; border: 1.5px dashed #c9bccf; width: 86%; height: 86%; display: grid; place-items: center; }
.snap.has-photo .snap-empty { display: none; }
.snap figcaption { padding: 8px 2px 10px; text-align: center; font-family: var(--hand); font-size: var(--fs-md); font-weight: 600; color: var(--hand-ink); }
/* controls */
.book-bar { position: absolute; z-index: 70; left: 0; right: 0; bottom: -62px; display: flex; justify-content: center; align-items: center; gap: 18px; pointer-events: none; }
.book-bar button, .book-close {
pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
display: grid; place-items: center; color: #fff; background: #336699;
box-shadow: 0 0 0 3px #fbe4e2, 0 6px 12px -4px rgba(30, 30, 60, .45);
}
.book-bar svg, .book-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.book-bar button:disabled { opacity: .35; cursor: default; }
.book-bar button:focus-visible, .book-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.book-count { font-family: var(--hand); font-size: var(--fs-md); font-weight: 700; color: #fff; min-width: 3.2em; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.book-close { position: absolute; z-index: 70; top: -18px; left: -14px; }
@media (max-width: 760px), (max-height: 560px) {
.folder { position: relative; left: auto; --fw: min(56vw, 220px); margin: 6px 0 10px; opacity: 1; translate: none; }
.j-item.top .folder, .j-item.bottom .folder { top: auto; bottom: auto; }
.f-date { font-size: var(--fs-base); } .f-role { font-size: var(--fs-xs); } .f-org { font-size: var(--fs-xs); }
.book { height: min(620px, 74svh); width: 88vw; }
.page { padding: 40px 20px 80px; }
.snaps { flex-direction: column; align-items: center; gap: 22px; }
.snap { width: min(62%, 190px); flex: none; }
.snap:nth-child(2) { margin-top: 0; }
.sheet { transform: translate(calc(var(--i) * 6px), calc(var(--i) * 6px)) rotate(calc(var(--i) * var(--fan, 1.5deg))); }
}
@media (prefers-reduced-motion: reduce) {
.sheet { transition: opacity .2s ease; animation: none; }
.sheet.gone { transform: none; }
.folder { opacity: 1; translate: none; }
.f-sheet, .f-front { transition: none; }
}
/* =====================================================================
Projects: cards with a picture on top that lift and zoom on hover
===================================================================== */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 30px); }
.pcard {
position: relative; display: flex; flex-direction: column; overflow: hidden;
border-radius: 20px; background: var(--paper-grain), var(--paper);
box-shadow: 0 1px 2px rgba(90, 40, 40, .14), 0 16px 28px -18px rgba(90, 40, 40, .45);
transition: translate .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease, opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
.pcard[data-href] { cursor: pointer; }
.pcard:hover, .pcard:focus-within { translate: 0 -8px; box-shadow: 0 1px 2px rgba(90, 40, 40, .14), 0 30px 44px -20px rgba(90, 40, 40, .55); }
.pc-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(150deg, var(--c1), var(--c2)); }
.pc-media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 255, 255, .35), transparent 70%); }
.pc-art, .pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.pc-media img { object-fit: cover; }
.pcard:hover .pc-art, .pcard:hover .pc-media img, .pcard:focus-within .pc-art, .pcard:focus-within .pc-media img { transform: scale(1.1); }
.pc-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.pc-when { margin: 0 0 6px; font-family: var(--hand); font-size: var(--fs-md); font-weight: 600; line-height: 1; color: var(--hand-ink); }
.pc-body h3 { font-size: clamp(var(--fs-base), 1.5vw, var(--fs-md)); transition: color .3s ease; }
.pcard:hover h3, .pcard:focus-within h3 { color: var(--c2); }
.pc-desc { margin: 10px 0 0; flex: 1; font-size: var(--fs-base); line-height: var(--lh); color: var(--ink-soft); }
.pcard .tags { margin-top: 16px; }
.pcard .tags li { background: color-mix(in srgb, var(--c1) 38%, transparent); color: color-mix(in srgb, var(--c2) 70%, #2a1a22); }
.pc-link {
align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
font-weight: 600; font-size: var(--fs-xs); color: var(--c2); text-decoration: none;
text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.pc-link:hover, .pc-link:focus-visible { text-decoration: underline; outline: none; }
.pc-link:focus-visible { outline: 2px solid var(--c2); outline-offset: 4px; border-radius: 3px; }
.pc-arrow { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s ease; }
.pc-link:hover .pc-arrow, .pc-link:focus-visible .pc-arrow { translate: 4px 0; }
.pc-note { margin: 18px 0 0; font-family: var(--hand); font-size: var(--fs-base); font-weight: 600; color: var(--hand-ink); }
@media (max-width: 980px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.pcard, .pc-art, .pc-media img, .pc-arrow { transition: none; }
.pcard:hover, .pcard:focus-within { translate: none; }
.pcard:hover .pc-art, .pcard:hover .pc-media img { transform: none; }
}
/* the camp games: one project, shown as a wide feature card across the top */
.pcard.feature { grid-column: 1 / -1; flex-direction: row; }
.pcard.feature .pc-media { flex: 0 0 50%; aspect-ratio: auto; min-height: 320px; }
.pcard.feature .pc-body { padding: 26px 30px 28px; }
.pcard.feature h3 { font-size: clamp(var(--fs-md), 2.2vw, var(--fs-lg)); }
.pc-games-label { margin: 16px 0 6px; font-family: var(--hand); font-size: var(--fs-md); font-weight: 700; color: var(--hand-ink); }
.pc-games { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pc-games li {
padding: 7px 13px 8px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
background: #fffaf4; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c1) 70%, transparent), 0 3px 6px -3px rgba(90, 40, 40, .3);
}
.pc-games li:nth-child(odd) { rotate: -1.5deg; } .pc-games li:nth-child(even) { rotate: 1.5deg; }
@media (max-width: 820px) {
.pcard.feature { flex-direction: column; }
.pcard.feature .pc-media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
}
/* game chips are buttons that open the gallery */
.game-chip {
appearance: none; border: 0; cursor: pointer; font: inherit; color: inherit;
padding: 7px 13px 8px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 600;
background: #fffaf4; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c1) 70%, transparent), 0 3px 6px -3px rgba(90, 40, 40, .3);
transition: translate .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background-color .25s ease;
}
.pc-games li { padding: 0; background: none; box-shadow: none; }
.game-chip:hover, .game-chip:focus-visible { translate: 0 -3px; background: #fff; box-shadow: 0 0 0 2px var(--c2), 0 8px 14px -6px rgba(90, 40, 40, .4); outline: none; }
/* =====================================================================
Game gallery
===================================================================== */
.gallery-dialog { border: 0; padding: 0; background: none; max-width: none; max-height: none; width: 100%; height: 100%; overflow: visible; }
.gallery-dialog::backdrop { background: rgba(50, 26, 50, .55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.gallery-dialog[open] { display: grid; place-items: center; }
.gallery {
--c1: #f5c97c; --c2: #d98e3f;
position: relative; width: min(900px, 94vw); max-height: 92vh; overflow: auto;
padding: 22px clamp(18px, 3vw, 30px) 26px; border-radius: 26px;
background: var(--paper-grain), var(--paper);
box-shadow: 0 40px 80px -30px rgba(40, 10, 30, .6);
animation: galleryIn .45s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes galleryIn { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.g-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 48px; margin-bottom: 16px; }
.g-tab {
appearance: none; border: 0; cursor: pointer; font: 600 14.5px/1 "Albert Sans", sans-serif; color: var(--ink);
padding: 9px 14px 10px; border-radius: 999px; background: rgba(245, 201, 124, .22);
transition: background-color .25s ease, color .25s ease;
}
.g-tab:hover { background: rgba(245, 201, 124, .45); }
.g-tab[aria-selected="true"] { color: #fff; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.g-tab:focus-visible { outline: 2px solid var(--c2); outline-offset: 3px; }
.g-stage { position: relative; }
.g-frame { margin: 0; }
.g-img {
position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden;
background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(150deg, #f7e2c7, #efcfa8);
}
.g-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fadeImg .4s ease both; }
@keyframes fadeImg { from { opacity: 0; } }
.g-empty {
position: absolute; inset: 18px; display: grid; place-items: center; text-align: center; padding: 20px;
border: 2px dashed rgba(168, 97, 42, .45); border-radius: 12px;
font-family: var(--hand); font-size: clamp(var(--fs-md), 2.4vw, var(--fs-lg)); line-height: 1.2; color: #94541f;
}
.g-cap { min-height: 1.4em; margin-top: 10px; text-align: center; font-family: var(--hand); font-size: var(--fs-md); font-weight: 600; color: var(--hand-ink); }
.g-prev, .g-next, .g-close {
position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
display: grid; place-items: center; color: #fff; background: #336699;
box-shadow: 0 0 0 3px #fbe4e2, 0 6px 12px -4px rgba(30, 30, 60, .45);
}
.g-prev svg, .g-next svg, .g-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-prev, .g-next { top: calc(50% - 38px); }
.g-prev { left: 12px; } .g-next { right: 12px; }
.g-prev[hidden], .g-next[hidden] { display: none; }
.g-close { top: 16px; right: 16px; }
.g-prev:focus-visible, .g-next:focus-visible, .g-close:focus-visible { outline: 3px solid var(--c2); outline-offset: 3px; }
.g-dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; }
.g-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(168, 97, 42, .3); transition: background .25s ease, scale .25s ease; }
.g-dots span.on { background: #d98e3f; scale: 1.25; }
.g-info { margin-top: 14px; }
.g-title { font-family: "Bodoni Moda", "Didot", Georgia, serif; font-weight: 800; font-size: clamp(var(--fs-lg), 3vw, var(--fs-xl)); line-height: 1; }
.g-desc { margin: 10px 0 0; max-width: 64ch; font-size: var(--fs-base); line-height: var(--lh); color: var(--ink-soft); }
@media (max-width: 620px) {
.g-prev, .g-next { width: 38px; height: 38px; top: calc(50% - 34px); }
.g-prev { left: 8px; } .g-next { right: 8px; }
.g-tab { font-size: var(--fs-xs); padding: 8px 12px 9px; }
}
@media (prefers-reduced-motion: reduce) { .gallery, .g-img img { animation: none; } }
/* reference contact under each recommendation */
.pg-ref-line { margin: 18px 0 0; font-family: var(--hand); font-size: var(--fs-md); font-weight: 600; color: #2f4f7a; }
.pg-ref { font-family: "Albert Sans", sans-serif; font-size: var(--fs-base); font-weight: 600; color: #336699; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.pg-ref:hover, .pg-ref:focus-visible { color: #1f3f66; outline: none; }
.pg-ref:focus-visible { outline: 2px solid #336699; outline-offset: 3px; border-radius: 3px; }
.pg-ref.no-link { text-decoration: none; color: var(--ink-soft); }
/* =====================================================================
Deep plum theme: the site sits on a dark aubergine gradient, like the
original About page, with paper, cards and the phone screen staying light.
===================================================================== */
:root {
--page: #23101c;
--wall: #2c1524;
--floor: #1f0e19;
--ink: #f8e9ef; /* text on the dark background */
--ink-soft: #d9bac7;
--hand-ink: #f3a9c5; /* handwriting in soft pink */
color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wall: #2c1524; } }
:root[data-theme="dark"] { --wall: #2c1524; }
body {
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(120, 48, 86, .28), transparent 70%) fixed,
var(--fibres), var(--paper-grain),
linear-gradient(to bottom, #2a1422, #1e0d18 60%, #190a14) fixed;
}
body::after { opacity: .08; mix-blend-mode: soft-light; }
/* anything made of paper keeps dark ink */
.card, .pcard, .page, .tip, .bubble, .f-label, .gallery, .snap, .btn:not(.primary), .game-chip, .screen {
--ink: #3b1d29; --ink-soft: #6b4452; --hand-ink: #7d3a52;
color: var(--ink);
}
/* home page: a plum studio with a soft rose glow behind the phone */
.hero {
background:
radial-gradient(ellipse 42% 58% at 30% 45%, rgba(214, 120, 160, .22) 0%, rgba(150, 60, 105, .12) 45%, transparent 72%),
radial-gradient(ellipse 60% 70% at 70% 40%, rgba(120, 45, 85, .25), transparent 70%),
linear-gradient(to bottom, #2e1626 0%, #26121f 60%, #1f0e19 100%);
}
.hero::before { background: radial-gradient(ellipse 80% 85% at 50% 45%, transparent 50%, rgba(8, 2, 6, .45) 100%); }
.window-light { opacity: .12; }
@keyframes clouds { 0%, 100% { opacity: .12; } 40% { opacity: .07; } 55% { opacity: .1; } }
.phone { box-shadow:
inset 0 0 0 1.5px rgba(255, 220, 228, .34),
inset 0 0 0 5px #1a0c12,
0 0 0 1px rgba(255, 200, 220, .08),
0 30px 70px -20px rgba(0, 0, 0, .6),
0 0 90px -10px rgba(214, 120, 160, .25); }
/* sections: the dot grid in faint pink */
.block {
background-color: var(--page);
background-image: radial-gradient(circle at 1px 1px, rgba(255, 190, 215, .08) 1px, transparent 1.5px), var(--fibres), var(--paper-grain);
}
.section-head p { color: var(--hand-ink); }
/* the header bar once you scroll */
.site-header.solid {
background: rgba(34, 15, 27, .88);
-webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
border-bottom: 1.5px dashed rgba(243, 169, 197, .25);
box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .8);
}
/* timeline marks read on dark */
.j-fill { filter: brightness(1.15); }
.pg-ref.no-link { color: var(--ink-soft); }
/* work timeline: a warmer mauve with a soft light behind the folders */
.journey { --page: #4a2238; background: var(--fibres), var(--paper-grain), #4a2238; }
.journey .j-pin {
background:
radial-gradient(ellipse 75% 55% at 50% 58%, rgba(255, 214, 228, .20), transparent 72%),
linear-gradient(135deg, rgba(93, 44, 71, .9), rgba(74, 34, 56, 0) 45%, rgba(56, 23, 41, .9));
}
/* =====================================================================
Work timeline backdrop: warm mauve with a soft light behind the folders,
plus a faded photo of each place that drifts in as you reach that job.
Photos are assets/work/bg-.jpg; logos are assets/work/logo-.png
===================================================================== */
.journey { --page: #4a2238; background: var(--fibres), var(--paper-grain), #4a2238; }
.journey .j-pin {
background:
radial-gradient(ellipse 75% 55% at 50% 58%, rgba(255, 214, 228, .18), transparent 72%),
linear-gradient(135deg, #5d2c47, #4a2238 45%, #381729);
}
.j-pin > .inner, .j-viewport { position: relative; z-index: 1; }
.j-scenes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.j-scene {
position: absolute; inset: -3%;
background: center / cover no-repeat;
opacity: 0; scale: 1.06;
filter: grayscale(1) contrast(.9) blur(1.5px);
mix-blend-mode: luminosity; /* keeps the photo's light and shade, takes the mauve colour */
transition: opacity 1.1s ease, scale 6s ease-out;
}
.j-scene.on { opacity: .32; scale: 1; }
/* fade the photo out toward the edges and under the heading so the folders stay the brightest thing */
.j-scenes::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(to bottom, #4a2238 0%, rgba(74, 34, 56, .55) 22%, transparent 45%, transparent 70%, rgba(56, 23, 41, .8) 100%),
radial-gradient(ellipse 90% 80% at 50% 55%, transparent 40%, rgba(56, 23, 41, .75) 100%);
}
@media (max-width: 760px), (max-height: 560px) { .j-scenes { display: none; } }
@media (prefers-reduced-motion: reduce) { .j-scene { transition: opacity .3s; scale: 1; } }
/* small company logo on the folder label */
.f-logo {
position: absolute; top: -12px; right: -10px; width: 30px; height: 30px; object-fit: contain;
background: #fffaf4; border-radius: 50%; padding: 4px; box-shadow: 0 2px 6px rgba(40, 10, 25, .25);
rotate: 6deg;
}
/* =====================================================================
Recommendations: circular carousel. Photos stack in 3D on the left
(current one in front, neighbours tilted behind), the quote on the right
fades in word by word.
===================================================================== */
.ctesti { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; max-width: 960px; margin: 0 auto; padding-top: 30px; }
@media (min-width: 768px) { .ctesti { grid-template-columns: 1fr 1.05fr; } }
.ct-data { display: none; }
.ct-images { position: relative; width: 100%; height: clamp(300px, 34vw, 400px); perspective: 1000px; }
.ct-img {
position: absolute; inset: 0; margin: 0; border-radius: 24px; overflow: hidden;
box-shadow: 0 18px 40px rgba(20, 5, 14, .45), 0 0 0 1px rgba(255, 220, 235, .08);
transition: transform .8s cubic-bezier(.4, 1.6, .3, 1), opacity .8s ease, filter .8s ease;
opacity: 0; pointer-events: none; z-index: 1;
}
.ct-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-img.is-active { z-index: 3; opacity: 1; transform: none; }
.ct-img.is-left { z-index: 2; opacity: 1; transform: translateX(calc(var(--gap) * -1)) translateY(calc(var(--gap) * -.8)) scale(.85) rotateY(15deg); filter: brightness(.72) saturate(.85); }
.ct-img.is-right { z-index: 2; opacity: 1; transform: translateX(var(--gap)) translateY(calc(var(--gap) * -.8)) scale(.85) rotateY(-15deg); filter: brightness(.72) saturate(.85); }
.ct-img.is-left, .ct-img.is-right { cursor: pointer; pointer-events: auto; }
/* placeholder until a photo is added */
.ct-ph {
width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 10px;
background:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 55%),
linear-gradient(150deg, var(--a, #f3b7cb), var(--b, #a5557b));
color: #fff8fb;
}
.ct-ph b { font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(var(--fs-3xl), 7vw, var(--fs-5xl)); line-height: 1; font-weight: 800; text-shadow: 0 3px 12px rgba(60, 10, 35, .25); }
.ct-ph small { font-family: var(--hand); font-size: var(--fs-md); opacity: .85; }
.ct-img:nth-child(3n+2) .ct-ph { --a: #c7b8f5; --b: #6f5aa8; }
.ct-img:nth-child(3n+3) .ct-ph { --a: #f7cf9a; --b: #c77a48; }
.ct-content { display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(260px, 30vw, 360px); }
.ct-text h3 { margin: 0 0 4px; font-family: "Bodoni Moda", Georgia, serif; font-weight: 800; font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-xl)); color: var(--ink); line-height: 1.1; }
.ct-text .ct-role { margin: 0 0 26px; font-family: var(--hand); font-size: var(--fs-md); color: var(--hand-ink); }
.ct-text blockquote { margin: 0; font-size: clamp(var(--fs-base), 1.45vw, var(--fs-md)); line-height: var(--lh); color: var(--ink-soft); }
.ct-text blockquote::before { content: "\201C"; display: block; font-family: "Bodoni Moda", Georgia, serif; font-size: var(--fs-4xl); line-height: .6; height: 26px; color: #d97a9b; }
.ct-w { display: inline-block; opacity: 0; filter: blur(10px); translate: 0 5px; animation: ctWord .22s ease-in-out forwards; animation-delay: calc(var(--i) * 25ms); }
@keyframes ctWord { to { opacity: 1; filter: blur(0); translate: 0 0; } }
.ct-text.swap { animation: ctIn .3s ease both; }
@keyframes ctIn { from { opacity: 0; transform: translateY(20px); } }
.ct-arrows { display: flex; align-items: center; gap: 18px; padding-top: 34px; }
.ct-arrow {
width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
background: #f8e9ef; color: #3b1d29; box-shadow: 0 4px 14px rgba(20, 5, 14, .35);
transition: background-color .3s, color .3s, transform .2s;
}
.ct-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ct-arrow:hover { background: #d97a9b; color: #fff; }
.ct-arrow:active { transform: scale(.94); }
.ct-arrow:focus-visible { outline: 2px solid #f3a9c5; outline-offset: 3px; }
.ct-count { font-family: var(--hand); font-size: var(--fs-md); color: var(--ink-soft); margin-left: 4px; }
@media (max-width: 767px) { .ct-content { min-height: 0; } .ct-images { width: 82%; margin: 40px auto 0; } }
@media (prefers-reduced-motion: reduce) {
.ct-img { transition: opacity .3s; } .ct-w { animation: none; opacity: 1; filter: none; translate: none; } .ct-text.swap { animation: none; }
}
/* =====================================================================
Get in touch: one framed panel with plus marks on the corners,
details on the left, message form on the right
===================================================================== */
.gt {
position: relative; display: grid; max-width: 1080px; margin: 0 auto;
background: linear-gradient(160deg, rgba(74, 34, 56, .72), rgba(40, 17, 31, .82));
border: 1px solid rgba(243, 169, 197, .22);
box-shadow: 0 30px 60px rgba(15, 4, 11, .35);
}
@media (min-width: 860px) { .gt { grid-template-columns: 1.55fr 1fr; } }
.gt-plus { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.gt-plus::before, .gt-plus::after { content: ""; position: absolute; background: #f3a9c5; border-radius: 1px; }
.gt-plus::before { left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; }
.gt-plus::after { top: 50%; left: 0; right: 0; height: 2px; translate: 0 -50%; }
.gt-plus.tl { top: -11px; left: -11px; } .gt-plus.tr { top: -11px; right: -11px; }
.gt-plus.bl { bottom: -11px; left: -11px; } .gt-plus.br { bottom: -11px; right: -11px; }
.gt-info { padding: clamp(30px, 5vw, 58px); }
.gt-info h2 { margin: 0; font-family: "Bodoni Moda", Georgia, serif; font-weight: 800; font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl)); line-height: 1.02; color: var(--ink); letter-spacing: -.01em; }
.gt-lead { margin: 20px 0 0; max-width: 34em; font-size: var(--fs-base); line-height: var(--lh); color: var(--ink-soft); }
.gt-list { list-style: none; margin: 38px 0 0; padding: 0; display: grid; gap: 22px 28px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gt-item { display: flex; align-items: center; gap: 16px; color: var(--ink); text-decoration: none; border-radius: 14px; }
.gt-item b { display: block; font-weight: 600; font-size: var(--fs-base); }
.gt-item small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-soft); overflow-wrap: anywhere; }
.gt-ic {
flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
background: rgba(20, 6, 14, .45); border: 1px solid rgba(243, 169, 197, .14); color: #f3a9c5;
transition: background-color .25s, color .25s, transform .25s;
}
.gt-ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.gt-item:hover .gt-ic, a.gt-item:focus-visible .gt-ic { background: #d97a9b; color: #fff; transform: translateY(-2px); }
a.gt-item:hover small { color: var(--ink); }
a.gt-item:focus-visible { outline: 2px solid #f3a9c5; outline-offset: 4px; }
.gt-form {
display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3.5vw, 40px);
background: rgba(20, 6, 14, .28); border-top: 1px solid rgba(243, 169, 197, .18);
}
@media (min-width: 860px) { .gt-form { border-top: 0; border-left: 1px solid rgba(243, 169, 197, .18); } }
.gt-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }
.gt-field { display: flex; flex-direction: column; gap: 8px; }
.gt-field span { font-weight: 600; font-size: var(--fs-xs); color: var(--ink); }
.gt-field em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.gt-field input, .gt-field textarea {
font: inherit; font-size: var(--fs-base); color: var(--ink); width: 100%;
background: rgba(15, 4, 11, .55); border: 1px solid rgba(243, 169, 197, .16); border-radius: 12px;
padding: 13px 14px; transition: border-color .2s, box-shadow .2s;
}
.gt-field textarea { resize: vertical; min-height: 120px; }
.gt-field input:focus, .gt-field textarea:focus { outline: none; border-color: #f3a9c5; box-shadow: 0 0 0 3px rgba(243, 169, 197, .2); }
.gt-submit {
margin-top: 6px; font: inherit; font-weight: 600; font-size: var(--fs-base); padding: 15px; border: 0; border-radius: 12px; cursor: pointer;
background: #f8e9ef; color: #3b1d29; transition: background-color .25s, color .25s, transform .15s;
}
.gt-submit:hover { background: #d97a9b; color: #fff; }
.gt-submit:active { transform: scale(.98); }
.gt-submit:focus-visible { outline: 2px solid #f3a9c5; outline-offset: 3px; }
.gt-submit[disabled] { opacity: .6; cursor: default; }
.gt-status { margin: 0; min-height: 1.4em; font-family: var(--hand); font-size: var(--fs-md); color: #f3a9c5; }
.gt-status.err { color: #ffc2a8; }
.gt-status a { color: inherit; }
/* ---- Get in touch as an envelope: airmail border, flap, seal, stamp, postmark ---- */
.gt {
border: 10px solid transparent;
border-image: repeating-linear-gradient(-45deg, #f3a9c5 0 11px, transparent 11px 18px, #b9a4f0 18px 29px, transparent 29px 36px) 10;
margin-top: 26px;
}
.gt-plus { display: none; }
.gt-info, .gt-form { position: relative; z-index: 1; }
.gt-info { padding-top: clamp(64px, 8vw, 96px); }
.gt-form { padding-top: clamp(64px, 8vw, 96px); }
.gt-flap { position: absolute; left: 0; top: 0; width: 100%; height: clamp(46px, 7vw, 86px); z-index: 0; pointer-events: none; overflow: visible; }
.gt-flap .fl { fill: rgba(255, 214, 228, .07); }
.gt-flap .ln { fill: none; stroke: rgba(243, 169, 197, .45); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.gt-seal {
position: absolute; z-index: 2; left: 50%; top: calc(clamp(46px, 7vw, 86px) * .95); translate: -50% -50%;
width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
background: radial-gradient(circle at 35% 30%, #e992b3, #a8446f 70%);
box-shadow: 0 4px 10px rgba(20, 5, 14, .45), inset 0 -3px 6px rgba(80, 10, 40, .4), inset 0 2px 3px rgba(255, 220, 235, .4);
/* slightly uneven wax edge */
border-radius: 52% 48% 50% 50% / 48% 52% 49% 51%;
}
.gt-seal svg { width: 22px; height: 22px; fill: rgba(255, 235, 243, .9); }
.gt-stamp {
position: absolute; z-index: 3; top: -30px; right: -18px; rotate: 6deg;
width: 84px; height: 100px; padding: 6px; background: #fbeef3;
/* perforated edges */
-webkit-mask: radial-gradient(circle 4px at 4px 4px, transparent 98%, #000) -4px -4px / 11px 11px;
mask: radial-gradient(circle 4px at 4px 4px, transparent 98%, #000) -4px -4px / 11px 11px;
filter: drop-shadow(0 4px 8px rgba(20, 5, 14, .4));
}
.gt-stamp > span {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%;
background: linear-gradient(160deg, #a996ef, #6f5aa8); border: 1.5px solid rgba(255, 255, 255, .5);
}
.gt-stamp svg { width: 34px; height: 34px; fill: rgba(255, 255, 255, .25); stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.gt-stamp i { font-family: var(--hand); font-style: normal; font-size: var(--fs-base); color: #fff; line-height: 1; }
.gt-postmark {
position: absolute; z-index: 4; top: 22px; right: 38px; width: 124px; rotate: -10deg; pointer-events: none; overflow: visible;
fill: none; stroke: rgba(243, 169, 197, .55); stroke-width: 1.6;
}
.gt-postmark text { fill: rgba(243, 169, 197, .7); stroke: none; font-family: "Albert Sans", system-ui, sans-serif; font-size: 7.5px; font-weight: 600; letter-spacing: .12em; }
.gt-postmark .pm-mid { font-size: 10px; }
@media (max-width: 859px) {
.gt-stamp { width: 66px; height: 80px; right: -8px; top: -26px; }
.gt-postmark { width: 100px; right: 22px; top: 16px; }
.gt-form { padding-top: clamp(28px, 3.5vw, 40px); }
}
.gt-stamp {
width: 80px; height: 100px;
-webkit-mask: radial-gradient(circle at center, transparent 3.2px, #000 3.7px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) content-box;
mask: radial-gradient(circle at center, transparent 3.2px, #000 3.7px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) content-box;
}
@media (max-width: 859px) {
.gt-stamp { width: 70px; height: 80px; }
.gt-info { padding-top: 92px; }
}
/* never let the page shift sideways (clip keeps position: sticky working, unlike hidden) */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
/* on narrow phones keep the tilted recommendation photos inside the screen */
@media (max-width: 480px) {
.ct-images { width: 70%; }
.gt-stamp { right: -4px; }
}
/* small phones: section titles drop one golden step (27.5px), still 1.618x the body text */
@media (max-width: 480px) {
.section-head h2 { font-size: var(--fs-lg); }
.section-head > div { min-width: 0; }
}
/* =====================================================================
Mobile menu
===================================================================== */
.menu-btn { display: none; }
.m-menu[hidden] { display: none; }
@media (max-width: 760px), (max-height: 500px) {
.mini-nav { display: none; }
.menu-btn {
display: grid; place-items: center; flex: none; margin-left: auto;
width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(243, 169, 197, .28); cursor: pointer;
background: rgba(34, 15, 27, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
color: var(--ink); box-shadow: 0 6px 16px -6px rgba(10, 2, 7, .5);
}
.menu-btn:focus-visible { outline: 2px solid #f3a9c5; outline-offset: 3px; }
.menu-btn .bars { position: relative; width: 20px; height: 14px; }
.menu-btn i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease, top .3s ease; }
.menu-btn i:nth-child(1) { top: 0; } .menu-btn i:nth-child(2) { top: 6px; } .menu-btn i:nth-child(3) { top: 12px; }
.menu-btn[aria-expanded="true"] i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.m-menu {
position: fixed; z-index: 19; left: 12px; right: 12px;
top: calc(env(safe-area-inset-top, 0px) + 78px);
max-height: calc(100svh - 96px - env(safe-area-inset-top, 0px)); overflow: auto;
padding: 10px; border-radius: 20px;
background: rgba(34, 15, 27, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border: 1px solid rgba(243, 169, 197, .22); box-shadow: 0 24px 50px -12px rgba(10, 2, 7, .7);
animation: menuIn .28s cubic-bezier(.2, .8, .2, 1) both;
}
.site-header.solid .m-menu { top: calc(env(safe-area-inset-top, 0px) + 70px); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.m-menu ul { list-style: none; margin: 0; padding: 0; }
.m-menu li a {
display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 14px; border-radius: 12px;
font-size: var(--fs-md); font-family: "Bodoni Moda", Georgia, serif; font-weight: 700; color: var(--ink); text-decoration: none;
}
.m-menu li a:hover, .m-menu li a:focus-visible { background: rgba(243, 169, 197, .1); outline: none; }
.m-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--c); rotate: 45deg; flex: none; }
.m-menu-foot { margin: 8px 4px 4px; padding: 12px 10px 4px; border-top: 1px dashed rgba(243, 169, 197, .25); display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); color: var(--ink-soft); }
.m-menu-foot a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: rgba(243, 169, 197, .5); padding: 4px 0; display: inline-block; }
}
/* =====================================================================
Footer
===================================================================== */
.site-footer {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 40px clamp(22px, 6vw, 80px) calc(40px + env(safe-area-inset-bottom, 0px));
font-family: "Albert Sans", "Helvetica Neue", Arial, sans-serif; font-size: var(--fs-xs); color: var(--ink-soft);
border-top: 1px dashed rgba(243, 169, 197, .18);
}
.site-footer p { margin: 0; }
.f-nav, .f-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.f-nav a { font-family: var(--hand); font-size: var(--fs-md); color: var(--hand-ink); text-decoration: none; padding: 4px 2px; }
.f-nav a:hover { color: var(--ink); }
.site-footer a { text-underline-offset: 3px; }
.f-social a, .f-copy a { color: var(--ink); text-decoration-color: rgba(243, 169, 197, .45); padding: 6px 2px; display: inline-block; }
.f-social a:hover, .f-copy a:hover { color: #f3a9c5; }
.site-footer a:focus-visible { outline: 2px solid #f3a9c5; outline-offset: 2px; border-radius: 4px; }
/* sections that have nothing to show yet are hidden, along with every link to them */
.is-empty, [data-needs].is-empty { display: none !important; }
.game-chip.is-plain { cursor: default; opacity: .75; }
.game-chip.is-plain:hover { translate: none; background: #fffaf4; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c1) 70%, transparent); }
.g-stage[hidden] { display: none !important; }
/* ---- form messages, copy button, pop-up toasts ---- */
.gt-err { min-height: 0; font-size: var(--fs-xs); color: #ffb49a; }
.gt-err:empty { display: none; }
.gt-field input[aria-invalid="true"], .gt-field textarea[aria-invalid="true"] { border-color: #ff9d86; box-shadow: 0 0 0 3px rgba(255, 157, 134, .18); }
.gt-status { font-family: "Albert Sans", system-ui, sans-serif; font-size: var(--fs-xs); line-height: 1.5; border-radius: 10px; }
.gt-status:empty { display: none; }
.gt-status.ok, .gt-status.err { padding: 10px 12px; }
.gt-status.ok { color: #d9f5e6; background: rgba(90, 160, 140, .2); border: 1px solid rgba(120, 200, 170, .35); }
.gt-status.err { color: #ffd9cc; background: rgba(255, 140, 110, .12); border: 1px solid rgba(255, 157, 134, .35); }
.gt-status a { color: inherit; font-weight: 600; }
.gt-li-email { display: flex; align-items: center; gap: 10px; }
.gt-li-email .gt-item { min-width: 0; }
.gt-copy {
flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 6px 10px; border-radius: 10px; cursor: pointer;
font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft);
background: transparent; border: 1px solid rgba(243, 169, 197, .25); transition: background-color .2s, color .2s;
}
.gt-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.gt-copy:hover { background: rgba(243, 169, 197, .12); color: var(--ink); }
.gt-copy.done { color: #bdf0d8; border-color: rgba(120, 200, 170, .45); }
.gt-copy:focus-visible { outline: 2px solid #f3a9c5; outline-offset: 2px; }
.toast {
position: fixed; z-index: 100; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
translate: -50% 20px; opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
padding: 12px 18px; border-radius: 14px; font-size: var(--fs-xs); font-weight: 600;
background: #f8e9ef; color: #3b1d29; box-shadow: 0 14px 30px -10px rgba(10, 2, 7, .6);
transition: opacity .25s ease, translate .3s cubic-bezier(.2, .8, .2, 1);
}
.toast.on { opacity: 1; translate: -50% 0; }
.toast[data-kind="err"] { background: #ffd9cc; color: #5a1a0c; }
.toast::before { content: "✓ "; } .toast[data-kind="err"]::before { content: "! "; }
/* ---- mobile polish ---- */
/* comfortable tap areas for the logo and small text links */
.brand { padding: 10px 0; margin: -10px 0; }
.pc-link { padding: 8px 0; margin: -8px 0; display: inline-flex; align-items: center; }
/* small phones: the copy button shrinks to an icon so the address stays on one line */
@media (max-width: 480px) {
.gt-copy { padding: 0; width: 40px; min-height: 40px; justify-content: center; }
.gt-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gt-item small { overflow-wrap: normal; word-break: normal; }
}
/* phones turned sideways: phone and about text side by side, sized to the short screen */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
.hero { height: auto; min-height: 100vh; min-height: 100svh; }
.hero-grid { grid-template-columns: auto minmax(0, 1fr); height: auto; align-items: start; gap: 32px; padding: 84px 28px 48px; }
.phone-col { height: auto; }
.phone { --pw: min(calc((100svh - 124px) * .4615), 38vw); }
.about-col { justify-self: start; }
.hint-arrow { rotate: 0deg; }
}
.gt-li-email { grid-column: 1 / -1; }