/* Michael Boakye Photography — shared styles.
   Page-specific styles live in each page's <head>; colours and type follow the canvas design. */

/* ---- Fonts, served with the site ---- */
@font-face{font-family:'League Gothic';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/league-gothic-400.woff2) format('woff2')}
@font-face{font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/mrs-saint-delafield-400.woff2) format('woff2')}
@font-face{font-family:'Hind';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/hind-300.woff2) format('woff2')}
@font-face{font-family:'Hind';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hind-400.woff2) format('woff2')}
@font-face{font-family:'Hind';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hind-500.woff2) format('woff2')}
@font-face{font-family:'Hind';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hind-600.woff2) format('woff2')}
@font-face{font-family:'Hind';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/hind-700.woff2) format('woff2')}

[hidden]{display:none !important}
/* If a display font is ever unavailable, wrap a long word rather than cut it off at the screen edge */
.mb h1,.mb h2,.mb h3,.mbf-cta-word{overflow-wrap:break-word}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
body{margin:0;background:#000000}
::selection{background:#D8C8AF;color:#000000}
img{max-width:100%}

/* ---- Intro and page transition ---- */
@keyframes mbiDev{0%{opacity:0;filter:blur(10px) brightness(1.9)}55%{opacity:1}100%{opacity:1;filter:blur(0) brightness(1)}}
@keyframes mbiRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes mbiLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mbiCard{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes mbiFailsafe{to{opacity:0;visibility:hidden}}
.mbi{position:fixed;inset:0;z-index:200;overflow:hidden;container-type:inline-size;pointer-events:auto;animation:mbiFailsafe .3s ease 4s forwards}
.mbi.js{animation:none}
.mbi.is-open{pointer-events:none}
.mbi-half{position:absolute;left:0;right:0;height:50.5%;background:#000000;transition:transform .85s cubic-bezier(.77,0,.18,1)}
.mbi-top{top:0}
.mbi-bot{bottom:0}
.mbi.is-intro .mbi-half{transition-duration:1s}
.mbi.is-leaving .mbi-half{transition-duration:.55s;transition-timing-function:cubic-bezier(.7,0,.3,1)}
.mbi.is-open .mbi-top{transform:translate3d(0,-100%,0)}
.mbi.is-open .mbi-bot{transform:translate3d(0,100%,0)}
.mbi-fade{transition:opacity .45s ease}
.mbi.is-open .mbi-fade{opacity:0}
.mbi-intro{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:0 16px;text-align:center;pointer-events:none}
.mbi.is-intro .mbi-intro{display:flex}
.mbi-logo{width:clamp(210px,27cqi,400px);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 2px 24px rgba(0,0,0,.65))}
.mbi-logo img{display:block;height:auto}
.mbi-logo img:first-child{width:70.2%}
.mbi-logo img:last-child{width:100%;margin-top:4.6%}
.mbi-dev{animation:mbiDev 1.3s cubic-bezier(.2,.7,.2,1) both}
.mbi-intro p{margin:clamp(22px,2.4cqi,34px) 0 0;max-width:34em;font-family:'Hind','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:clamp(12px,.85cqi,13.5px);line-height:1.7;letter-spacing:.22em;text-transform:uppercase;color:#F3EDE3;text-wrap:balance}
.mbi-rise{animation:mbiRise .9s cubic-bezier(.2,.7,.2,1) both}
.mbi-line-wrap{position:absolute;left:50%;bottom:48px;width:140px;height:1px;transform:translateX(-50%);overflow:hidden;background:rgba(216,200,175,.25);display:none}
.mbi.is-intro .mbi-line-wrap{display:block}
.mbi-line{width:100%;height:1px;background:#F3EDE3;transform-origin:0 50%;animation:mbiLine 1.6s cubic-bezier(.5,0,.2,1) .2s both}
.mbi-card{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:0 16px;pointer-events:none}
.mbi.is-enter .mbi-card{display:flex}
.mbi-card p{margin:0;text-align:center;font-family:'League Gothic','Arial Narrow',sans-serif;font-size:clamp(64px,10cqi,150px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:#F3EDE3;animation:mbiCard .38s cubic-bezier(.2,.7,.2,1) both}
.mbi-card p:empty{display:none}

/* ---- Phone menu: solid bar, logo and no page scroll while open ---- */
.mbn.is-open{background:#000000 !important}
.mbn.is-open .mbn-bar{padding-bottom:16px !important}
.mbn.is-open .mbn-brand{display:inline-flex !important}
html.mb-lock{overflow:hidden;overscroll-behavior:none}
/* the menu fills the screen under the bar (100vh first, for browsers that don't know dvh) */
#mbn-menu{height:calc(100vh - 76px);max-height:calc(100vh - 76px);overflow-y:auto;overscroll-behavior:contain}
@supports (height:100dvh){#mbn-menu{max-height:calc(100dvh - 76px)}}

/* ---- Phones and small tablets: the bar is always within reach ---- */
@container mb (max-width: 900px){
  .mbn:not(.is-overlay){position:sticky !important;top:0;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .mbn.is-tucked:not(.is-open){transform:translate3d(0,-100%,0)}
  .mb input,.mb textarea,.mb button{scroll-margin-top:96px}
}

/* ---- Contact form ---- */
.mbc-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.mbc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mbn{transition:none !important}
  .mbi-dev,.mbi-rise,.mbi-line,.mbi-card p{animation:none}
  .mbi-half,.mbi-fade{transition:none}
}

/* ---- Nav (from canvas) ---- */
body{margin:0}
.mbn *{box-sizing:border-box}
.mbn a,.mbn button{-webkit-tap-highlight-color:transparent;transition:color .2s ease,text-shadow .2s ease}
.mbn a{color:#F3EDE3}
.mbn a:hover,.mbn button:hover{color:#D8C8AF !important}
.mbn a:active,.mbn button:active{color:#FFFFFF !important;text-shadow:0 0 16px rgba(243,237,227,0.6)}
.mbn :focus{outline:none}
.mbn :focus-visible{outline:1px solid #F3EDE3;outline-offset:4px}
.mbn-cta svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mbn-cta:hover svg{transform:translateX(5px)}
.mbn-links{display:flex}
.mbn-menubtn{display:none}
@container mbn (max-width: 1080px){.mbn-links{display:none}.mbn-menubtn{display:inline-flex}}
@container mbn (max-width: 640px){.mbn-cta{display:none !important}.mbn-name{display:none !important}}
/* Phone menu: the pages sit at the bottom of the screen, right-aligned, within reach of a thumb */
@keyframes mbnIn{from{clip-path:inset(0 0 0 100%);transform:translate3d(26px,0,0)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes mbnFade{from{opacity:0}to{opacity:1}}
.mbn-word{animation:mbnIn .62s cubic-bezier(.2,.7,.2,1) backwards}
.mbn-here{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:10px}
.mbn .mbn-row:hover .mbn-word{color:#D8C8AF !important}
.mbn .mbn-row:active .mbn-word{color:#FFFFFF !important}
.mbn-date{animation:mbnFade .5s ease .42s both}
.mbn-date svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mbn-date:hover svg,.mbn-date:active svg{transform:translateX(6px)}
@media (max-height: 600px){.mbn .mbn-row{min-height:92px !important}.mbn .mbn-date{min-height:76px !important}}
@media (prefers-reduced-motion: reduce){.mbn-cta svg,.mbn-date svg{transition:none}.mbn-word,.mbn-date{animation:none}}
/* ---- Footer (from canvas) ---- */
body{margin:0}
.mbf *{box-sizing:border-box}
.mbf{-webkit-tap-highlight-color:transparent}
.mbf a{color:#F3EDE3;transition:color .2s ease,text-shadow .2s ease}
.mbf a:active{color:#FFFFFF !important;text-shadow:0 0 16px rgba(243,237,227,0.6)}
.mbf a:hover{color:#D8C8AF}
.mbf :focus{outline:none}
.mbf :focus-visible{outline:1px solid #F3EDE3;outline-offset:4px}
.mbf-cta svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.mbf-cta:hover svg{transform:translateX(12px)}
.mbf-cta-word{transition:color .3s ease}
.mbf-cta:hover .mbf-cta-word{color:#D8C8AF}
@container mbf (max-width: 640px){.mbf-band{padding:44px 16px 34px !important;gap:16px !important}.mbf-band-l{gap:12px !important}.mbf-cols{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) !important;gap:22px 18px !important;padding:24px 16px !important}.mbf-cols a{font-size:15px}.mbf-brand{grid-column:1 / -1;flex-direction:row !important;align-items:center !important;gap:16px !important}.mbf-logo{width:76px !important}.mbf-pages{grid-column:1 / -1}.mbf-legal{padding:0 16px 24px !important}}
@container mbf (max-width: 350px){.mbf-cols{grid-template-columns:minmax(0,1fr) !important}}
@media (prefers-reduced-motion: reduce){.mbf-cta svg{transition:none}}