/* The original Binoki guideline is master. See design-system/MASTER.md. */
*{box-sizing:border-box}
html{scroll-padding-top:var(--binoki-spacing-24)}
body{margin:0;background:var(--binoki-brand-paper);color:var(--binoki-brand-ink);font-family:var(--binoki-family-latin),var(--binoki-family-tc),sans-serif;font-size:var(--binoki-size-body);font-weight:var(--binoki-weight-regular);line-height:var(--binoki-line-body);letter-spacing:var(--binoki-tracking-default);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}a,button{-webkit-tap-highlight-color:transparent}
::selection{background:var(--binoki-brand-red);color:var(--binoki-brand-white)}
h1{font-size:var(--binoki-size-display);line-height:var(--binoki-line-display);font-weight:var(--binoki-weight-semibold)}
h2{font-size:var(--binoki-size-heading);line-height:var(--binoki-line-heading);font-weight:var(--binoki-weight-semibold)}
h3,.brand,.footer-name{font-size:var(--binoki-size-title);line-height:var(--binoki-line-title);font-weight:var(--binoki-weight-semibold)}
.meta{font-size:var(--binoki-size-meta);line-height:var(--binoki-line-meta);font-weight:var(--binoki-weight-medium)}
.wrap{width:100%;max-width:calc(3 * var(--binoki-size-card-max) + 2 * var(--binoki-spacing-48) + 2 * var(--binoki-spacing-24));margin-inline:auto;padding-inline:var(--binoki-spacing-24)}
.section{padding-block:var(--binoki-spacing-64)}
.nav{min-height:calc(var(--binoki-spacing-64) + var(--binoki-spacing-16));display:flex;justify-content:space-between;align-items:center;gap:var(--binoki-spacing-24)}
.brand{display:flex;align-items:center;gap:var(--binoki-spacing-8)}
.brand img{width:var(--binoki-spacing-32);height:var(--binoki-line-heading);object-fit:contain}
.nav nav{display:flex;gap:var(--binoki-spacing-24)}

.hero-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--binoki-spacing-32);padding-block:var(--binoki-spacing-48)}
.hero-heading h1{margin-top:var(--binoki-spacing-8)}
.hero-heading>p{padding-bottom:var(--binoki-spacing-4)}
.scene{position:relative;isolation:isolate;overflow:hidden;color:var(--fg)}
.scene:after{content:"";position:absolute;inset:0;background:var(--scrim);z-index:-1;pointer-events:none}
.scene-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.scene-content{position:relative;min-height:inherit;padding-block:var(--binoki-spacing-48)}
.hero-scene{min-height:clamp(480px,65vh,720px)}
.hero-scene .scene-content{display:flex;flex-direction:column;justify-content:space-between;gap:var(--binoki-spacing-64)}
.hero-scene .scene-photo{object-position:center 53%}
.scene-logo{width:calc(var(--binoki-spacing-64) * 3);height:auto;background:var(--binoki-brand-paper)}
.scene-bottom{display:flex;align-items:end;justify-content:space-between;gap:var(--binoki-spacing-24)}
.scene-caption{max-width:var(--binoki-size-card-max);padding:var(--binoki-spacing-8) var(--binoki-spacing-12);background:var(--binoki-material-fallback)}
.card-top{display:flex;align-items:center;justify-content:space-between;height:var(--binoki-size-card-top-row);margin-bottom:var(--binoki-spacing-16)}
.frosted-card h3,.frosted-card h2{font-size:var(--binoki-size-title);line-height:var(--binoki-line-title);font-weight:var(--binoki-weight-semibold);margin-bottom:var(--binoki-spacing-8)}
.frosted-card p{font-size:var(--binoki-size-body);line-height:var(--binoki-line-body)}
.icon{width:var(--binoki-size-icon-medium);height:var(--binoki-size-icon-medium);flex-shrink:0;display:block}


.about,.writing{display:grid;grid-template-columns:1fr 1fr;gap:var(--binoki-spacing-64);align-items:start}
.about h2,.section-heading h2,.writing h2{margin-top:var(--binoki-spacing-12)}
.prose p+p{margin-top:var(--binoki-spacing-16)}
.section-heading{padding-block:var(--binoki-spacing-32)}
.work-scene{min-height:560px}
.work-scene .scene-content{display:flex;align-items:end}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;align-items:stretch}
.studio-logo{width:calc(var(--binoki-spacing-64) * 3);height:auto;margin-top:var(--binoki-spacing-24)}
.writing-intro{margin-top:var(--binoki-spacing-24)}
.writing .frosted-card{justify-self:end}
.outro{min-height:560px}
.outro .scene-content{display:flex;justify-content:flex-end;align-items:end}
.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--binoki-spacing-24)}
.footer-top{margin-bottom:var(--binoki-spacing-32)}
.footer-top .button{margin:0}
.footer-bottom{padding-top:var(--binoki-spacing-24)}
.skip{position:fixed;top:var(--binoki-spacing-16);left:var(--binoki-spacing-16);z-index:10;background:var(--binoki-brand-paper);padding:var(--binoki-spacing-12);margin:0;transform:translateY(-200%)}
.skip:focus{transform:none}
.dialog-toolbar{display:flex;justify-content:end;margin-bottom:var(--binoki-spacing-16)}
#dialog-tag{font-size:var(--binoki-size-meta);line-height:var(--binoki-line-meta);margin-bottom:var(--binoki-spacing-8)}
.dialog-rule{height:0;margin-block:var(--binoki-spacing-24)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
@media(max-width:700px){.nav{gap:var(--binoki-spacing-12);flex-wrap:wrap;padding-block:var(--binoki-spacing-12)}.nav nav{gap:var(--binoki-spacing-24)}.hero-heading{flex-direction:column;align-items:start;padding-block:var(--binoki-spacing-32);gap:var(--binoki-spacing-16)}.hero-scene{min-height:620px}.scene-content{padding-block:var(--binoki-spacing-24)}.hero-scene .scene-photo{object-position:35% center}.scene-bottom{flex-direction:column;align-items:start;gap:var(--binoki-spacing-16)}.scene-caption{display:none}.about,.writing{grid-template-columns:minmax(0,1fr);gap:var(--binoki-spacing-24)}.project-grid{grid-template-columns:minmax(0,1fr);max-width:var(--binoki-size-card-max)}.work-scene{min-height:680px}.work-scene .scene-content{align-items:center}.work-scene .scene-photo{object-position:34% center}.writing .frosted-card{justify-self:start}.outro{min-height:560px}.outro .scene-content{justify-content:flex-start}.outro .scene-photo{object-position:30% center}.footer-bottom{align-items:start;flex-direction:column;gap:var(--binoki-spacing-16)}}

.hero-heading>div{min-width:0;max-width:100%}

.prose>.button{margin-top:var(--binoki-spacing-16)}
@media(max-width:700px){.nav nav{gap:var(--binoki-spacing-4)}}

.work-cards{padding-bottom:48px}.writing .feature-card{width:100%}@media(max-width:700px){.project-grid{grid-template-columns:1fr;max-width:none}}

@media(min-width:701px) and (max-width:1000px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}