/* =====================================================================
rachell.dev — "warm bento" shared stylesheet
Tokens, base styles and every shared component. Page extras live in
/css/work.css and /css/hire.css.
HEAD SNIPPET (copy verbatim into every page, then set title/meta):
---------------------------------------------------------------------
header.site-header · main.site-main · footer.site-footer
Copy the header/footer markup from /index.html (only change aria-current).
CLASS INDEX
---------------------------------------------------------------------
Layout .page .container .site-main .site-main--home
Type .hand .hand--coral .hand--muted .serif .display-1 .display-2
.section-head .eyebrow .section-title .card-label .card-label--lg
.lede .body-text .visually-hidden
Nav .site-header .nav-pill .wordmark .wordmark__text .wordmark__squiggle
.nav-links .nav-links__item--desk .nav-link .nav-hire
.menu-toggle .menu-toggle__open .menu-toggle__close
.nav-menu .nav-menu__link (active = aria-current="page")
Theme .theme-toggle .theme-toggle__moon .theme-toggle__sun .stars .star
Footer .site-footer .site-footer__email
Card .card .lift
Buttons .btn .btn--ink0 .btn--outline .btn--block .btn__icon .btn-row
Chips .chip .chip--glass .chip-row .dot
Stickers .sticker .wiggle (rotation via --r, e.g. style="--r:-6deg")
.hi-bubble .tests-pill
Shades .shades .shades__img
Tools .tools .tools__frame .tools__scroll .tools__grid .tool .tool__icon .tool__name .tools__hint
Projects .project-grid .project-card .project-card__img .project-card__body
.project-card__head .project-card__title .project-card__cat .project-card__desc
.project-card--detailed
Hire band .hire-band .hire-band__text .hire-band__eyebrow .hire-band__title .hire-band__lede
.hire-band__actions .hire-band__email .hire-band__sticker
Home only .bento .intro .intro__media .intro__photo .intro__figure .intro__blob(--coral|--butter)
.intro__img .intro__body .intro__eyebrow .intro__title .intro__role .intro__text .intro__chip
.now .now-list .now-row .now-row__icon(--sun|--moon|--video) .now-row__title .now-row__sub
.love .love-list .love-item .love-item__sticker .love-item__label
.selected .selected__more
Icons .ic (stroke icon), .ic-fill (fill currentColor)
BREAKPOINTS phone < 700 · tablet 700–1099 · desktop ≥ 1100 · nav switches at 900
===================================================================== */
/* ---------- Tokens ---------- */
@property --bg { syntax: ''; inherits: true; initial-value: #F5EFE6; }
@property --card { syntax: ''; inherits: true; initial-value: #FFFCF7; }
@property --line { syntax: ''; inherits: true; initial-value: #EADFCF; }
@property --ink { syntax: ''; inherits: true; initial-value: #211C17; }
@property --muted { syntax: ''; inherits: true; initial-value: #6B6157; }
@property --body { syntax: ''; inherits: true; initial-value: #4A423A; }
@property --coral { syntax: ''; inherits: true; initial-value: #E0643F; }
@property --coralText { syntax: ''; inherits: true; initial-value: #B4461F; }
@property --teal { syntax: ''; inherits: true; initial-value: #2E7A6E; }
@property --chip { syntax: ''; inherits: true; initial-value: #F3EBDE; }
@property --green { syntax: ''; inherits: true; initial-value: #3F9A5A; }
@property --glow { syntax: ''; inherits: true; initial-value: #FFFBF4; }
:root {
--bg: #F5EFE6;
--card: #FFFCF7;
--line: #EADFCF;
--ink: #211C17;
--muted: #6B6157;
--body: #4A423A;
--coral: #E0643F;
--coralText: #B4461F;
--butter: #F4C95D;
--teal: #2E7A6E;
--chip: #F3EBDE;
--green: #3F9A5A;
--glow: #FFFBF4;
/* Fixed in both themes */
--ink0: #211C17;
--cream: #FFF6E8;
--paper: #FFFCF7;
--butter-edge: #E8B94A;
--font-display: 'Instrument Serif', Georgia, serif;
--font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-hand: 'Caveat', cursive;
--radius-card: 28px;
--radius-tile: 24px;
--shadow-card: 0 18px 40px -26px rgba(90, 60, 30, 0.28);
--shadow-tile: 0 18px 40px -28px rgba(90, 60, 30, 0.3);
--shadow-lift: 0 26px 50px -26px rgba(90, 60, 30, 0.4);
--shadow-float: 0 12px 30px -20px rgba(90, 60, 30, 0.35);
--shadow-sticker: drop-shadow(0 6px 8px rgba(80, 50, 20, 0.22));
--spring: cubic-bezier(.3, 1.5, .5, 1);
--t-theme: .45s ease;
--content: 1160px;
--gutter: 40px;
color-scheme: light;
transition: --bg var(--t-theme), --card var(--t-theme), --line var(--t-theme), --ink var(--t-theme),
--muted var(--t-theme), --body var(--t-theme), --coral var(--t-theme), --coralText var(--t-theme),
--teal var(--t-theme), --chip var(--t-theme), --green var(--t-theme), --glow var(--t-theme);
}
[data-theme="dark"] {
--bg: #141414;
--card: #1F1F1F;
--line: #333333;
--ink: #F2F2F2;
--muted: #A6A6A6;
--body: #D0D0D0;
--coral: #EE7A55;
--coralText: #F4A07C;
--butter: #F4C95D;
--teal: #3E9C8D;
--chip: #2B2B2B;
--green: #5CC27A;
--glow: #262626;
color-scheme: dark;
}
@media (max-width: 1099px) { :root { --gutter: 24px; } }
@media (max-width: 699px) { :root { --gutter: 16px; } }
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
position: relative;
margin: 0;
min-height: 100vh;
background: radial-gradient(1200px 600px at 50% -120px, var(--glow) 0%, transparent 70%), var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul[class] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 3px;
}
.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;
}
/* Stroke / fill icon helpers (arrows, check, hamburger) */
.ic { fill: none; stroke: currentColor; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-fill { fill: currentColor; flex-shrink: 0; }
/* ---------- Layout ---------- */
.page {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
width: min(var(--content), 100% - 2 * var(--gutter));
margin-inline: auto;
padding: 32px 0 40px;
}
.container { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.site-main { flex: 1; display: flex; flex-direction: column; margin-top: 56px; }
.site-main--home { gap: 72px; }
@media (max-width: 699px) {
.page { padding: 20px 0 32px; }
.site-main { margin-top: 20px; }
.site-main--home { gap: 40px; }
}
/* ---------- Typography ---------- */
.hand {
font-family: var(--font-hand);
font-weight: 600;
line-height: 1;
color: var(--ink);
}
.hand--coral { color: var(--coralText); }
.hand--muted { color: var(--muted); }
.serif {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.04;
letter-spacing: -0.01em;
color: var(--ink);
}
.display-1 { font-size: 80px; } /* Work h1 */
.display-2 { font-size: 60px; } /* Home / Hire h1 */
.section-head { display: flex; flex-direction: column; gap: 8px; }
.eyebrow { font-size: 30px; } /* use with .hand .hand--coral */
.section-title { font-size: 46px; } /* use with .serif */
.card-label { font-size: 34px; } /* card h2 in Caveat */
.card-label--lg { font-size: 38px; }
.lede { font-size: 19px; line-height: 1.55; color: var(--body); }
.body-text { font-size: 17px; line-height: 1.6; color: var(--body); }
@media (max-width: 1099px) {
.display-1 { font-size: 64px; }
}
@media (max-width: 699px) {
.display-1 { font-size: 52px; }
.display-2 { font-size: 46px; }
.section-head { gap: 6px; padding: 0 4px; }
.eyebrow { font-size: 26px; }
.section-title { font-size: 36px; }
.card-label, .card-label--lg { font-size: 30px; }
.lede { font-size: 16px; }
.body-text { font-size: 16px; }
}
/* ---------- Card ---------- */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
.lift { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
/* ---------- Nav (desktop pill ≥ 900, mobile bar < 900) ---------- */
.site-header { position: relative; z-index: 5; display: flex; justify-content: center; }
.nav-pill {
display: flex;
align-items: center;
gap: 4px;
padding: 7px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: var(--shadow-float);
}
.wordmark {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-height: 44px;
margin-right: 10px;
padding: 0 6px;
flex-shrink: 0;
text-decoration: none;
color: var(--ink);
border-radius: 999px;
}
.wordmark__text { font-family: var(--font-hand); font-weight: 700; font-size: 34px; line-height: 1; }
.wordmark__squiggle { width: 87px; height: 9px; margin-top: -2px; overflow: visible; }
.wordmark__squiggle path { fill: none; stroke: var(--coral); stroke-width: 3.5px; stroke-linecap: round; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 12px 20px;
border-radius: 999px;
font-size: 16px;
font-weight: 500;
line-height: 1.25;
color: var(--ink);
text-decoration: none;
transition: background-color .2s ease;
}
.nav-link:hover { background: var(--chip); }
.nav-link[aria-current="page"] { background: var(--chip); font-weight: 600; }
.nav-hire {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-left: 10px;
padding: 11px 22px;
border: 1.5px solid var(--ink);
border-radius: 999px;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
color: var(--ink);
text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
.nav-hire:hover { background: var(--chip); }
.nav-hire[aria-current="page"] { background: var(--ink); color: var(--card); }
.site-header .theme-toggle { margin-left: 6px; }
.menu-toggle {
display: none;
place-items: center;
width: 44px;
height: 44px;
flex-shrink: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--chip);
color: var(--ink);
}
.menu-toggle:hover { background: var(--line); }
.menu-toggle svg { width: 20px; height: 20px; stroke-width: 2.2px; }
.menu-toggle__close, .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
.nav-menu {
position: absolute;
left: 0;
right: 0;
top: 66px;
display: flex;
flex-direction: column;
padding: 10px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 24px;
box-shadow: 0 24px 50px -20px rgba(60, 40, 20, 0.4);
}
.nav-menu__link {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 52px;
padding: 0 16px;
border-radius: 16px;
font-family: var(--font-display);
font-size: 28px;
color: var(--ink);
text-decoration: none;
}
.nav-menu__link svg { width: 18px; height: 18px; }
.nav-menu__link:hover, .nav-menu__link[aria-current="page"] { background: var(--chip); }
@media (min-width: 900px) {
.nav-menu { display: none !important; }
}
@media (max-width: 899px) {
.site-header { display: block; }
.nav-pill { gap: 10px; padding: 6px; }
.wordmark { margin-right: 0; padding: 0 5px; }
.wordmark__text { font-size: 31px; }
.wordmark__squiggle { width: 80px; height: 8px; }
.nav-pill > nav { margin-left: auto; }
.nav-links__item--desk { display: none; }
.nav-hire { margin-left: 0; height: 44px; padding: 0 18px; font-size: 15px; }
.site-header .theme-toggle { margin-left: 0; }
.menu-toggle { display: grid; }
}
/* ---------- Theme toggle ---------- */
.theme-toggle {
position: relative;
display: block;
width: 44px;
height: 44px;
flex-shrink: 0;
padding: 0;
border: 0;
border-radius: 50%;
overflow: hidden;
background: var(--chip);
color: var(--ink);
transition: background-color .2s ease;
}
.theme-toggle:hover { background: var(--line); }
.theme-toggle svg {
position: absolute;
inset: 0;
margin: auto;
transition: transform .55s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease;
}
.theme-toggle__moon { width: 22px; height: 22px; fill: currentColor; }
.theme-toggle__sun { width: 24px; height: 24px; fill: var(--butter); transform: rotate(90deg) scale(0); opacity: 0; }
[data-theme="dark"] .theme-toggle__sun { transform: none; opacity: 1; }
[data-theme="dark"] .theme-toggle__moon { transform: rotate(-90deg) scale(0); opacity: 0; }
/* ---------- Star field (dark only, built by site.js) ---------- */
.stars {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
opacity: 0;
transition: opacity .8s ease;
}
[data-theme="dark"] .stars { opacity: 1; }
.star { position: absolute; animation: tw 3.4s ease-in-out infinite; }
@keyframes tw {
0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); }
50% { opacity: 1; transform: scale(1) rotate(20deg); }
}
/* ---------- Footer ---------- */
.site-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 64px;
padding-top: 28px;
border-top: 1px solid var(--line);
font-size: 15px;
color: var(--muted);
}
.site-footer__email { color: var(--ink); font-weight: 500; text-decoration: none; }
.site-footer__email:hover { color: var(--coralText); text-decoration: underline; }
@media (max-width: 699px) { .site-footer { margin-top: 48px; } }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 16px 20px 16px 28px;
border: 0;
border-radius: 999px;
background: var(--ink);
color: var(--card);
font-size: 17px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
}
.btn__icon { width: 26px; height: 26px; }
.btn--ink0 { background: var(--ink0); color: var(--paper); }
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 15px 22px; }
.btn--block { display: flex; width: 100%; justify-content: space-between; padding: 16px 22px; }
.btn--block.btn--outline { padding: 15px 22px; }
.btn-row { display: flex; justify-content: center; }
/* ---------- Chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--chip);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: var(--ink);
}
.chip--glass { background: rgba(255, 252, 247, 0.6); color: var(--ink0); }
.dot {
--dot: var(--green);
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 50%;
background: var(--dot);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 22%, transparent);
}
/* ---------- Stickers ---------- */
.sticker { filter: var(--shadow-sticker); }
.wiggle {
transform: rotate(var(--r, 0deg));
transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
@media (hover: hover) {
.wiggle:hover { transform: rotate(0deg) scale(1.08); }
}
.hi-bubble {
--r: -8deg;
position: absolute;
z-index: 3;
display: inline-block;
padding: 6px 18px 8px;
background: var(--butter);
border: 4px solid #fff;
border-radius: 26px 26px 26px 6px;
font-family: var(--font-hand);
font-size: 34px;
font-weight: 700;
line-height: 1;
color: var(--ink0);
}
.tests-pill {
--r: 5deg;
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px 10px 14px;
background: var(--teal);
color: var(--cream);
border: 4px solid #fff;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.tests-pill svg { width: 18px; height: 18px; stroke-width: 3px; }
/* ---------- Pixel shades (sit on the Home photo) ----------
Place inside a box that has the photo's 355:347 ratio. */
.shades {
position: absolute;
left: 45.13%;
top: 26.68%;
width: 35.76%;
z-index: 2;
transform: rotate(7deg);
transform-origin: 38.4% 55%;
}
.shades__img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 6px rgba(40, 25, 10, .3));
animation: shadesDrop .9s cubic-bezier(.3, 1.5, .5, 1) .5s both;
transition: opacity .35s ease, transform .5s ease;
}
[data-theme="dark"] .shades__img {
animation: none;
opacity: 0;
transform: translateY(-70px) rotate(-14deg);
}
@keyframes shadesDrop {
from { opacity: 0; transform: translateY(-110px); }
to { opacity: 1; transform: none; }
}
/* ---------- Tool tiles + scroll area ---------- */
.tools { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 44px 28px 28px; }
.tools__frame { width: 100%; border-radius: 12px; }
.tools__frame:has(.tools__scroll:focus-visible) { outline: 2px solid var(--coral); outline-offset: 4px; }
.tools__scroll {
width: 100%;
height: 560px;
overflow-y: auto;
padding: 6px 4px 28px;
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
overscroll-behavior: contain;
-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.tools__scroll:focus-visible { outline: none; }
.tools__scroll::-webkit-scrollbar { width: 6px; }
.tools__scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.tools__grid {
display: grid;
grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
row-gap: 24px;
column-gap: 8px;
}
.tool { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.tool__icon {
width: var(--tile, 64px);
height: var(--tile, 64px);
border-radius: calc(var(--tile, 64px) * 0.27);
box-shadow: 0 8px 16px -10px rgba(40, 25, 10, 0.5);
}
.tool__name { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.tools__hint { margin-top: -8px; font-size: 20px; } /* use with .hand .hand--muted */
@media (max-width: 1099px) { .tools__scroll { height: 480px; } }
@media (max-width: 699px) {
.tools { padding: 28px 18px; gap: 24px; }
.tools__scroll { height: 250px; }
.tools__grid { --cols: 4; }
.tool { --tile: 54px; }
}
/* ---------- Project cards ---------- */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.project-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-tile);
box-shadow: var(--shadow-tile);
color: var(--ink);
text-decoration: none;
}
.project-card__img { width: 100%; height: 236px; object-fit: cover; object-position: top center; }
.project-card__body { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px 24px; }
.project-card--detailed .project-card__body { gap: 6px; }
.project-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.project-card__head svg { width: 20px; height: 20px; }
.project-card__title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.project-card__cat { font-size: 15px; color: var(--muted); }
.project-card__desc { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
@media (max-width: 1099px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
.project-grid { grid-template-columns: 1fr; gap: 16px; }
.project-card__img { height: 208px; }
}
/* ---------- Hire band (butter; text stays ink0 in dark mode) ---------- */
.hire-band {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 48px;
padding: 56px 64px;
background: var(--butter);
border-color: var(--butter-edge);
color: var(--ink0);
}
.hire-band :focus-visible { outline-color: var(--ink0); }
.hire-band__text { display: flex; flex-direction: column; gap: 14px; }
.hire-band__eyebrow { font-size: 34px; color: var(--ink0); }
.hire-band__title { font-size: 58px; max-width: 640px; color: var(--ink0); }
.hire-band__lede { max-width: 560px; font-size: 18px; line-height: 1.55; }
.hire-band .chip-row { gap: 8px; margin-top: 6px; }
.hire-band__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hire-band__email { font-size: 15px; font-weight: 500; color: var(--ink0); text-decoration: none; }
.hire-band__email:hover { text-decoration: underline; }
.hire-band__sticker { --r: 12deg; position: absolute; right: 56px; top: -40px; width: 100px; height: 100px; }
@media (max-width: 899px) {
.hire-band { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 44px 40px 36px; }
.hire-band__actions { align-items: flex-start; margin-top: 10px; }
}
@media (max-width: 699px) {
.hire-band { padding: 32px 24px 28px; }
.hire-band__eyebrow { font-size: 28px; }
.hire-band__title { font-size: 36px; }
.hire-band__lede { font-size: 16px; }
.hire-band__sticker { right: -6px; top: -30px; width: 80px; height: 80px; }
}
/* =====================================================================
HOME
===================================================================== */
/* Bento grid: desktop 400/400/340 cols, 420/300 rows */
.bento {
display: grid;
grid-template-columns: minmax(0, 400fr) minmax(0, 400fr) minmax(0, 340fr);
grid-template-rows: 420px 300px;
gap: 20px;
}
.bento > .intro { grid-column: span 2; }
.bento > .tools { grid-row: span 2; }
/* Intro card */
.intro { position: relative; display: flex; min-height: 420px; }
.intro__media { position: absolute; left: 0; bottom: 0; width: 330px; height: 400px; }
.intro__photo { position: absolute; inset: 0; overflow: hidden; border-bottom-left-radius: 27px; }
.intro__figure { position: absolute; left: 5px; bottom: 0; width: 320px; aspect-ratio: 355 / 347; }
.intro__blob { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.intro__blob--coral { left: 62%; bottom: 60%; width: 42%; background: var(--coral); }
.intro__blob--butter { left: 2%; bottom: 46%; width: 26%; background: var(--butter); }
.intro__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro .hi-bubble { left: 262px; top: 96px; }
.intro .tests-pill { right: 40px; top: -20px; }
.intro__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 14px;
margin-left: 360px;
padding: 52px 56px 48px 0;
}
.intro__eyebrow { font-size: 38px; }
.intro__role { font-size: 18px; font-weight: 500; color: var(--muted); }
.intro__text { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.intro__chip { margin-top: auto; align-self: flex-start; }
/* "these days" */
.now { display: flex; flex-direction: column; gap: 22px; padding: 36px; }
.now-list { display: flex; flex-direction: column; gap: 16px; }
.now-row { display: flex; align-items: center; gap: 14px; }
.now-row__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 14px;
}
.now-row__icon svg { width: 24px; height: 24px; }
.now-row__icon--sun { background: #FBE7C2; color: #A86A00; }
.now-row__icon--moon { background: #E3DFF1; color: #5B4BA8; }
.now-row__icon--video { background: #F6E2D5; color: #B4461F; }
.now-row__text { display: flex; flex-direction: column; gap: 2px; }
.now-row__title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.now-row__sub { font-size: 15px; line-height: 1.3; color: var(--muted); }
/* "Things I love beside code" */
.love { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 36px 28px; }
.love .card-label { text-align: center; }
.love-list { display: flex; justify-content: center; gap: 12px; }
.love-item { --s: 70px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.love-item__sticker { width: var(--s); height: var(--s); }
.love-item__label {
max-width: calc(var(--s) + 14px);
font-size: 21px;
line-height: .95;
text-align: center;
color: var(--body);
transform: rotate(var(--r, 0deg));
}
/* Selected work */
.selected { display: flex; flex-direction: column; gap: 28px; }
.selected__more { margin-top: 16px; }
/* Tablet: intro full width; tools | these days + love */
@media (max-width: 1099px) {
.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
.bento > .intro { grid-column: 1 / -1; }
.bento > .tools { grid-column: 1; grid-row: 2 / span 2; }
.intro__body { padding-right: 40px; }
.intro__title { font-size: clamp(44px, 5.4vw, 60px); }
.love { padding: 36px 16px; }
.love-list { gap: 8px; }
.love-item { --s: 64px; }
}
/* Phone: single column, photo on top (MobileHome) */
@media (max-width: 699px) {
.bento { display: flex; flex-direction: column; gap: 12px; }
.bento > .intro { order: 1; }
.bento > .now { order: 2; }
.bento > .love { order: 3; }
.bento > .tools { order: 4; }
.intro { flex-direction: column; min-height: 0; }
.intro__media { position: relative; width: auto; height: 300px; }
.intro__photo { border-radius: 27px 27px 0 0; }
.intro__figure { left: 50%; width: min(100% - 10px, 299px); transform: translateX(-50%); }
.intro .hi-bubble { left: calc(50% + 92px); top: 62px; font-size: 30px; }
.intro .tests-pill { right: 16px; top: -14px; }
.intro__body { margin-left: 0; gap: 12px; padding: 22px 24px 28px; border-top: 1px solid var(--line); }
.intro__eyebrow { font-size: 32px; }
.intro__title { font-size: 46px; }
.intro__role { font-size: 16px; }
.intro__text { margin-top: 4px; font-size: 16px; }
.intro__chip { margin-top: 6px; }
.now { gap: 18px; padding: 28px 24px; }
.now-list { gap: 18px; }
.now-row__icon { width: 40px; height: 40px; }
.love { gap: 22px; padding: 28px 12px; }
.selected { gap: 16px; }
.selected__more .btn__icon { width: 24px; height: 24px; }
.site-main--home > .hire-band { margin-top: 24px; }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
:root { transition: none; }
*, *::before, *::after { scroll-behavior: auto !important; }
.lift, .wiggle, .theme-toggle svg, .stars { transition: none; }
.lift:hover, .wiggle:hover { transform: rotate(var(--r, 0deg)); }
.star { animation: none; opacity: .7; }
.shades__img { animation: none; transition: none; }
}