/* pillowsoft.com — page layout on top of the Organic design system. Every
   color, font, radius and shadow comes from styles.css tokens. */
/* — dark theme: the warm ground goes to ink and the tonal ramps invert, so
   every tinted fill, deep-step text color and hover in styles.css keeps its
   role without a single component rule being rewritten. — */
[data-theme=dark]{
  --color-bg:#1b1917;--color-surface:#292521;--color-text:#f2e7d6;
  --color-accent:#e8925c;--color-accent-2:#a4b787;
  --color-divider:color-mix(in srgb,#f2e7d6 20%,transparent);
  --color-neutral-100:#2e2b25;--color-neutral-200:#474238;--color-neutral-300:#645c50;--color-neutral-400:#82796a;--color-neutral-500:#a19786;--color-neutral-600:#c0b6a5;--color-neutral-700:#dcd3c4;--color-neutral-800:#eee7db;--color-neutral-900:#f9f4ed;
  --color-accent-100:#402310;--color-accent-200:#643312;--color-accent-300:#8c491a;--color-accent-400:#b2622d;--color-accent-500:#d67f48;--color-accent-600:#f6a06b;--color-accent-700:#ffc6a5;--color-accent-800:#ffe1d0;--color-accent-900:#fff2eb;
  --color-accent-2-100:#272e1b;--color-accent-2-200:#3d472b;--color-accent-2-300:#56633f;--color-accent-2-400:#728157;--color-accent-2-500:#8fa073;--color-accent-2-600:#aebf92;--color-accent-2-700:#ccdbb2;--color-accent-2-800:#e1eecc;--color-accent-2-900:#f0fae1;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);--shadow-md:0 3px 10px rgba(0,0,0,.5);--shadow-lg:0 12px 32px rgba(0,0,0,.55);
}
html{background:var(--color-bg)}
[data-theme=dark] .washed{filter:saturate(.65) contrast(.9) brightness(.85) opacity(.9)}
[data-theme=dark] .hero::before{opacity:.5}

/* — cross-document view transitions for navigation (Chromium; other browsers
   just navigate normally). The masthead is named so it stays put while the
   page body crossfades and lifts. — */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.42s}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(0,0,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
.nav{view-transition-name:masthead}
::view-transition-group(masthead){animation-duration:.3s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* — responsive portraits — */
.portrait{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;background:var(--color-neutral-200)}
.portrait[data-missing]{position:relative;object-fit:none;box-shadow:inset 0 0 0 2px var(--color-divider)}
.portrait-fallback{display:none;align-items:flex-end;aspect-ratio:4 / 5;padding:var(--space-4);background:var(--color-neutral-200);box-shadow:inset 0 0 0 2px var(--color-divider);font-size:14px;color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.split-figure[data-missing] .portrait{display:none}
.split-figure[data-missing] .portrait-fallback{display:flex}

:root{--leading:30px;--half:15px;--edge:clamp(20px,5vw,72px);--measure:62ch}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-size:17px;line-height:var(--leading);text-wrap:pretty;overflow-x:clip}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--edge)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--edge);top:8px;z-index:9;background:var(--color-surface);padding:8px 14px;border-radius:999px}

/* — masthead — */
.nav{padding-inline:max(var(--edge),calc((100% - 1080px) / 2 + var(--edge)));padding-block:var(--space-4);gap:var(--space-4);flex-wrap:wrap}
.nav-brand{display:inline-flex;align-items:center;gap:10px;font-size:21px}
.nav-brand a{color:inherit;text-decoration:none}
.nav-brand .mark{width:16px;height:16px;border-radius:50%;background:var(--color-accent);flex:none}
.nav a{font-size:15px}
.nav a[aria-current=page]{color:var(--color-accent-700)}
.theme-toggle{flex:none;color:var(--color-text)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
[data-theme=dark] .theme-toggle .i-sun{display:block}
[data-theme=dark] .theme-toggle .i-moon{display:none}

/* — shared type — */
.kicker{display:block;font-size:13px;line-height:var(--half);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700);margin:0 0 var(--half)}
.display{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(38px,5.4vw,70px);line-height:1.08;letter-spacing:0;margin:0 0 0 -.028em}
.display .line{display:block}
.lede{font-size:19px;line-height:calc(var(--leading) + 3px);max-width:var(--measure);margin:calc(1.2 * var(--leading)) 0 0}
.body{max-width:var(--measure);color:color-mix(in srgb,var(--color-text) 82%,transparent)}
h2.sec{font-size:clamp(28px,3.2vw,38px);line-height:1.14;margin:0 0 var(--leading)}
h3.sub{font-size:23px;line-height:1.2;margin:0}
.muted{color:color-mix(in srgb,var(--color-text) 70%,transparent)}

/* — hero — */
.hero{position:relative;padding:calc(2.6 * var(--leading)) 0 calc(2 * var(--leading))}
.hero::before{content:"";position:absolute;right:-140px;top:-200px;width:400px;height:400px;border-radius:50%;background:var(--color-accent-2-200);z-index:-1;pointer-events:none}
@media (max-width:1360px){.hero::before{right:0}}
.hero.slim{padding-top:calc(1.8 * var(--leading));padding-bottom:var(--leading)}

/* — status pill — */
.status{display:inline-flex;align-items:center;gap:9px;background:var(--color-accent-2-100);color:var(--color-accent-2-800);font-size:14px;font-weight:600;padding:7px 16px;border-radius:999px;margin-top:calc(1.2 * var(--leading))}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--color-accent-2-600);flex:none}

/* — sections — */
section{padding:calc(1.6 * var(--leading)) 0}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--leading)}

/* — entry rows (projects, roles): a hanging terracotta dot, no rules — */
.entries{display:grid;gap:calc(1.5 * var(--leading))}
.entry{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--half) clamp(24px,4vw,64px);align-items:baseline}
.entry .who{position:relative;margin:0}
.entry .who::before{content:"";position:absolute;left:-34px;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--color-accent)}
@media (max-width:1220px){.entry .who::before{display:none}}
.entry .when{display:block;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent);margin-top:6px}
.entry .what{margin:0;max-width:54ch;color:color-mix(in srgb,var(--color-text) 82%,transparent)}
.entry .what p{margin:0 0 var(--half)}
.entry .what p:last-child{margin-bottom:0}
@media (max-width:860px){.entry{grid-template-columns:1fr}}

/* — chips — */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:var(--leading) 0 0;padding:0;list-style:none}

/* — card grid — */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-4);margin-top:var(--leading)}
.card{padding:var(--space-4) var(--space-6)}
.card-body{font-size:15px}
.card a{text-decoration:none}
.card a:hover{text-decoration:underline}

/* — split with a washed photograph — */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--leading) clamp(24px,5vw,80px);align-items:center}
.split-figure{margin:0;width:min(380px,100%);justify-self:end;border-radius:calc(2 * var(--radius-lg));overflow:hidden}
.split-figure img,.split-figure picture{display:block;width:100%}
.split-figure image-slot{width:100%;aspect-ratio:4 / 5}
@media (max-width:820px){.split{grid-template-columns:1fr}.split-figure{order:-1;justify-self:start}}

/* — the soft close patch — */
.patch{background:var(--color-accent-2-100);border-radius:calc(2 * var(--radius-lg));padding:calc(1.6 * var(--leading)) clamp(24px,4vw,60px)}
.patch h2{font-size:clamp(26px,3vw,34px);line-height:1.16;margin:0}
.patch p{margin:var(--half) 0 0;max-width:52ch;color:color-mix(in srgb,var(--color-text) 82%,transparent)}

/* — contact list — */
.reach{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--space-4);margin-top:var(--leading);padding:0;list-style:none}
.reach a{font-family:var(--font-heading);font-size:19px;text-decoration:none}
.reach a:hover{text-decoration:underline}
.reach span{display:block;font-size:14px;color:color-mix(in srgb,var(--color-text) 60%,transparent)}

/* — footer — */
footer{padding:calc(2 * var(--leading)) 0;font-size:14px;color:color-mix(in srgb,var(--color-text) 70%,transparent)}
footer .links{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--half)}
footer a{color:var(--color-accent-700)}