/* Inner pages: one size (15px), label|value rhythm. */
main.page{padding:88px var(--margin) 96px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.dim{opacity:.66}
dt{opacity:.66}
.meta{display:grid;grid-template-columns:96px 1fr;column-gap:24px;row-gap:2px}
.meta dd{margin:0}
img.fade{display:block;width:100%;height:auto;background:#efefef}
.plain{text-decoration:none}
.plain:hover{opacity:.5}
.plain,.link{transition:opacity 300ms ease-out}
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* index */
.filters{border-top:1px solid var(--ink);padding-top:12px;display:flex;flex-wrap:wrap;gap:4px 24px;margin-bottom:32px}
.filters button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-underline-offset:4px;text-decoration-thickness:1px;transition:opacity 300ms ease-out}
.filters button:hover{opacity:.5}
.filters button[aria-pressed="true"]{text-decoration:underline}
.entry{padding-top:24px;margin-bottom:24px;border-top:1px solid rgba(35,26,30,.12)}
.entry:first-child{border-top:0;padding-top:0}
.entry .meta{margin-bottom:12px}
.entry a{display:block;text-decoration:none}
.entry a.t:hover{text-decoration:underline;text-underline-offset:4px}
.empty{opacity:.66}
/* project */
.head{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:48px}
.head__l{max-width:360px}.head__l .desc{margin-top:16px}
.shots{display:flex;flex-direction:column;gap:24px}
.foot{display:flex;justify-content:space-between;margin-top:64px}
@media(max-width:700px){.head{grid-template-columns:1fr;gap:24px}.meta{grid-template-columns:90px 1fr}.filters{gap:24px}}
/* about */
.about{max-width:390px;margin:96px auto 0}
.about p+p{margin-top:16px}
.about .dim{margin-top:24px}
/* contact */
.contact{display:grid;grid-template-columns:1fr;gap:64px;padding-top:32px}
@media(min-width:900px){html:not(.embed) .contact{grid-template-columns:1fr 1fr;gap:32px;padding-top:32px;padding-bottom:64px}}
.form{max-width:420px;display:flex;flex-direction:column;gap:28px}
.form fieldset{border:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.form legend{opacity:.66;padding:0;width:100%;margin-bottom:8px}
.form fieldset label{position:relative;cursor:pointer}
.form fieldset input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.form fieldset label:has(input:checked) span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.form fieldset label:has(input:focus-visible){outline:1px solid var(--ink);outline-offset:3px}
.field{display:flex;flex-direction:column;gap:4px}
.field span{opacity:.66}
.field input,.field textarea{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:4px 0 6px;resize:none;width:100%}
.field input:focus-visible,.field textarea:focus-visible{outline:0;border-bottom-width:2px;padding-bottom:5px}
.field.bad span:after{content:" · " attr(data-req)}
.send{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left;width:max-content;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.send:hover{opacity:.5}
.side{padding-top:0}.side .meta{max-width:420px}
.thanks{max-width:420px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.services{margin-top:64px}
.services h2,.services h3{font:inherit;font-size:15px;margin:0}
.services h2{margin-bottom:24px}
.services__group{margin-top:28px}
.services h3{opacity:.66;margin-bottom:8px}
.services ul{list-style:none;margin:0;padding:0}
.services li{padding-left:16px;position:relative;line-height:1.7}
.services li:before{content:"\2013";position:absolute;left:0}
.about{padding-bottom:96px}

.about__fish{display:block;width:120px;height:auto;margin:0 0 72px auto}
@media(max-width:700px){.about__fish{width:96px;margin-bottom:48px}}

.services__more{margin-top:28px;line-height:1.7}

.plain{display:inline-block;padding:3px 0;min-height:24px}