@font-face{font-family:'Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('./garamond.woff?v=2') format('woff')}
:root { color-scheme: light; --ink:#35332e; --paper:#f3f0e7; --ease-out:cubic-bezier(0.23,1,0.32,1); }
* { box-sizing:border-box; }
html,body { margin:0; min-width:280px; min-height:100%; background:var(--paper); }
body { color:var(--ink); font-family:'Garamond',Georgia,serif; }
.surface { min-height:100svh; position:relative; isolation:isolate; overflow:hidden; }
.surface::after { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; background-image:var(--paper-grain); opacity:.23; }
h1 { font-weight:400; margin:0; text-wrap:balance; }
.identity { position:relative; z-index:2; }
.portfolio-link { display:inline-flex; min-height:44px; min-width:80px; justify-content:center; align-items:center; position:relative; color:inherit; font-size:1rem; line-height:1.3; text-decoration:none; transition:transform 140ms var(--ease-out); }
.portfolio-link span { position:relative; }
.portfolio-link span::after { content:''; position:absolute; height:1px; left:0; right:0; bottom:-4px; background:currentColor; opacity:.35; transform:scaleX(.28); transition:transform 160ms var(--ease-out),opacity 160ms ease; }
.portfolio-link:focus-visible { outline:1px solid currentColor; outline-offset:5px; }
.portfolio-link:active { transform:scale(.97); }
@media (hover:hover) and (pointer:fine) { .portfolio-link:hover span::after { transform:scaleX(1); opacity:.8; } }
/* Bone: a single piece of heavy, uncoated stationery. */
.bone { display:grid; place-items:center; padding:40px 24px 96px; background:#e8e4da; }
.bone .card { width:min(620px,100%); aspect-ratio:1.75; background:#f5f2e9; display:grid; place-items:center; position:relative; box-shadow:0 1px 1px #49433229,0 6px 12px -6px #49433238,0 28px 48px -22px #49433240; }
.bone .card::before { content:''; position:absolute; inset:0; background-image:var(--paper-grain); opacity:.24; pointer-events:none; }
.bone .identity { max-width:100%; text-align:center; padding:24px; transform:translateY(-3px); }
.bone h1 { font-variant-caps:small-caps; font-size:clamp(1.75rem,4vw,2.625rem); letter-spacing:.075em; line-height:1.15; text-shadow:0 1px 0 #fffaf0; }
.card-links { display:flex; justify-content:center; }
.bone .portfolio-link { min-width:0; width:80px; margin-top:14px; font-size:1rem; letter-spacing:.05em; }

@media(max-width:520px){.bone{padding-inline:24px}.bone .card{aspect-ratio:1.58}.bone .identity{padding:20px}.bone h1{font-size:1.875rem}.bone .portfolio-link{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.portfolio-link,.portfolio-link span::after{transition:none}.portfolio-link:active{transform:none}}

/* Both selected effects share the original Bone card. */
.card[hidden] { display:none; }
.bone .bio-page { aspect-ratio:auto; display:block; padding:52px 64px 40px; }
.bio-page h1 { text-align:center; margin-bottom:30px; }
.bio-copy { position:relative; z-index:2; font-size:1.125rem; line-height:1.65; }
.bio-copy p { margin:0 0 20px; }
.bio-copy p:last-child { margin-bottom:0; }
.bio-navigation { position:relative; z-index:2; display:flex; justify-content:center; margin-top:22px; }
.bio-page[hidden] { display:none; }
h1[tabindex="-1"]:focus { outline:none; }
@media(max-width:520px){.bone .bio-page{padding:36px 28px 28px}.bio-page h1{margin-bottom:24px}.bio-copy{font-size:1.0625rem;line-height:1.6}.bio-navigation{margin-top:18px}}
.card.has-weight { touch-action:none; cursor:grab; user-select:none; transform-style:preserve-3d; will-change:transform; }
.card.has-weight:active { cursor:grabbing; }
.card.has-weight .portfolio-link { cursor:pointer; }
.card .ink-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }
.card.ink-active h1 { opacity:0; }
@media(prefers-reduced-motion:reduce){.card.has-weight{will-change:auto;cursor:default}}