@font-face{font-family:LaboGothic;src:url('./fonts/gothic-book.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:LaboGothic;src:url('./fonts/gothic-demi.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
:root{color-scheme:light;font-family:LaboGothic,'Century Gothic',sans-serif;color:#181818;background:#fff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}[hidden]{display:none!important}
main{width:100%;min-height:100svh;display:flex;flex-direction:column;padding:clamp(24px,4.5vw,64px);margin:0 auto}.identity{flex:1;min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 0 56px}.logo{width:min(100%,1080px);margin:0;transform:translate3d(var(--logo-x,0px),var(--logo-y,0px),0);transition:transform .65s cubic-bezier(.2,.8,.2,1);font-size:1rem}.logo img{display:block;width:100%;height:auto}.location{margin:34px 0 0;line-height:1.9;text-align:center;color:#595959;font-size:1.0625rem;letter-spacing:.05em}.location>span:first-child{margin:0 12px}.town{white-space:nowrap}
.actions{width:min(100%,1080px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:.9375rem;padding:0 8px 6px}.instagram,#open-contact{display:inline-flex;align-items:center;gap:11px;min-height:44px;padding:9px 0;background:none;border:0;color:#181818;text-decoration:none;position:relative;letter-spacing:.035em}.instagram:after,#open-contact:after{content:'';height:1px;background:currentColor;position:absolute;left:0;right:0;bottom:4px;transform:scaleX(0);transform-origin:left;transition:transform .25s}.instagram:hover:after,#open-contact:hover:after{transform:scaleX(1)}a{color:inherit;text-underline-offset:4px}a:focus-visible,button:focus-visible{outline:2px solid #181818;outline-offset:6px}.instagram svg{flex-shrink:0}
#contact{width:min(100%,510px);margin:0 auto;padding:38px 0;position:relative}h2{font-family:LaboGothic,sans-serif;font-weight:400;font-size:1.6rem;letter-spacing:-.045em;line-height:1.4;margin:0 42px 32px 0}.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}label{display:block;font-size:.875rem;margin-bottom:10px;letter-spacing:.015em}input,textarea{display:block;border:1px solid #ccc;background:#fff;border-radius:0;width:100%;padding:12px 13px;font-size:1rem;color:#181818}input:focus,textarea:focus{outline:1px solid #181818;outline-offset:2px}textarea{resize:vertical;min-height:110px;line-height:1.6}textarea::placeholder{color:#707070}.privacy{font-family:Arial,sans-serif;font-size:.8125rem;color:#666;line-height:1.6;margin:18px 0 24px}.submit{width:100%;background:#181818;border:1px solid #181818;border-radius:0;color:#fff;font-size:.9375rem;letter-spacing:.025em;padding:15px 20px;min-height:48px}.submit:hover{background:#383838}.submit:disabled{opacity:.55;cursor:wait}#form-status{margin:20px 0 0;font-size:.9375rem;line-height:1.7}#form-status[data-state="error"]{color:#8f2626}.honey{display:none}
.contact-dialog{color:inherit;background:#fff;width:min(620px,calc(100% - 32px));max-height:calc(100svh - 48px);border:1px solid #e5e5e5;padding:32px 46px;margin:auto;overflow:auto}.contact-dialog #contact{padding:10px 0 12px}.contact-dialog::backdrop{background:rgba(255,255,255,.88);backdrop-filter:blur(5px)}.close{position:absolute;right:-10px;top:4px;display:grid;place-items:center;width:44px;height:44px;background:none;border:none}.close:hover{background:#f4f4f4}
@media(max-width:600px){main{padding:24px}.identity{min-height:380px;padding:24px 0 72px}.logo{width:100%}.location{max-width:290px;font-size:1rem;letter-spacing:.03em;margin-top:28px}.location>span:first-child{display:none}.town{display:block}.actions{gap:16px;padding:0 0 4px;font-size:.875rem}.instagram{gap:8px}.contact-dialog{padding:26px 24px;max-height:calc(100svh - 32px)}h2{font-size:1.4rem;line-height:1.4;margin-bottom:28px}.fields{grid-template-columns:1fr;gap:22px;margin-bottom:22px}.close{right:-8px}}
@media(max-width:350px){.actions{flex-direction:column;gap:4px;align-items:center}.identity{padding-bottom:40px}}
@media(min-width:1600px){.logo{width:min(78vw,1280px)}.actions{width:min(78vw,1280px)}}
@media(max-height:550px) and (min-width:601px){.identity{min-height:240px;padding-bottom:24px}.logo{width:min(65vw,680px)}.location{margin-top:12px}main{padding:20px 40px}}
@media(prefers-reduced-motion:reduce){.logo,.instagram:after,#open-contact:after{transition:none}.logo{transform:none}}
@media(prefers-reduced-motion:no-preference){.contact-dialog[open]{animation:appear .22s ease-out}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}

/* Two soft coastal lights: warm sand, then a pale blue sea. */
:root{background:#fffefa}
body{position:relative;isolation:isolate;background:#fffefa}
body::before,body::after{content:'';position:fixed;inset:-15%;z-index:-1;pointer-events:none;transform:translate3d(0,0,0)}
body::before{background:radial-gradient(ellipse at 24% 45%,rgba(232,211,174,.72),transparent 68%),radial-gradient(ellipse at 85% 80%,rgba(199,217,226,.38),transparent 62%);opacity:.86}
body::after{background:radial-gradient(ellipse at 32% 57%,rgba(170,198,214,.6),transparent 68%),radial-gradient(ellipse at 78% 30%,rgba(238,222,191,.58),transparent 64%);opacity:.08}
.logo{mix-blend-mode:multiply}
.logo img{transform-origin:50% 55%}
.contact-dialog{background:#fffefa}
.contact-dialog::backdrop{background:rgba(255,254,250,.88)}
@media(prefers-reduced-motion:no-preference){
  body::before{animation:sand-light 26s ease-in-out infinite}
  body::after{animation:sea-light 26s ease-in-out infinite}
  @keyframes sand-light{0%,100%{transform:translate3d(-4%,-2%,0) scale(1);opacity:.86}50%{transform:translate3d(4%,2%,0) scale(1.05);opacity:.26}}
  @keyframes sea-light{0%,100%{transform:translate3d(4%,2%,0) scale(1.05);opacity:.08}50%{transform:translate3d(-4%,-2%,0) scale(1);opacity:.88}}
}
.motion-paused::before,.motion-paused::after,.motion-paused .logo img{animation-play-state:paused}

.identity{padding-bottom:24px}
.people{max-width:100%;margin:10px 0 0;text-align:center;font-size:1rem;line-height:1.9;letter-spacing:.025em;color:#595959}
.people span{display:inline-block;max-width:100%}
.actions{width:auto;margin:10px auto 0;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0;flex-wrap:nowrap}
.logo-art{display:block;position:relative}
.logo-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.motion-ready img{opacity:0}
#form-status[data-state="success"]{margin:12px 0 0;padding:12px 0 8px;font-size:1rem;line-height:1.8}
#form-status[data-state="success"] p{margin:0 0 28px}
.confirmation-close{border:0;border-bottom:1px solid #bbb;background:none;padding:9px 0;font-size:.9375rem;min-height:44px}
.confirmation-close:hover{border-color:#181818}
#form-status:focus{outline:none}
@media(prefers-reduced-motion:no-preference){
  .logo-art{animation:entrance .58s ease-out both}
  .location{animation:entrance .5s ease-out .15s both}
  .people{animation:entrance .5s ease-out .22s both}
  .actions{animation:entrance .5s ease-out .35s both}
  .contact-dialog[open]{animation:dialog-in .3s cubic-bezier(.16,1,.3,1)}
  .contact-dialog[open]::backdrop{animation:backdrop-in .25s ease-out}
  #form-status[data-state="success"]{animation:entrance .3s ease-out}
  @keyframes entrance{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
  @keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes backdrop-in{from{opacity:0}to{opacity:1}}
}
@media(max-width:600px){.identity{padding:24px 0}.actions{gap:8px;margin-top:10px;font-size:.875rem}}
@media(max-width:350px){.actions{gap:8px}}
.sea-mark{display:block;width:76px;max-width:100%;margin:14px auto 0;pointer-events:none}
.sea-mark img{display:block;width:100%;height:auto;filter:brightness(0)}
#open-contact{font-weight:600}
@media(prefers-reduced-motion:no-preference){.sea-mark{animation:entrance .5s ease-out .27s both}}

.portraits{display:flex;justify-content:center;align-items:center;gap:18px;margin:20px auto 0}
.portraits img{display:block;width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 40%;border:1px solid rgba(255,254,250,.7)}
@media(max-width:600px){.portraits{gap:16px;margin-top:18px}.portraits img{width:72px;height:72px}}
@media(prefers-reduced-motion:no-preference){.portraits{animation:entrance .5s ease-out .2s both}}