/* Hinksons coming soon teaser (option B). No external fonts or scripts. */
@font-face{font-family:"Inspiration";src:url(assets/inspiration-latin.woff2) format("woff2");font-display:swap}
:root{--choc:#1a120c;--deep:#0d0805;--cream:#f1eae1;--ink:#2e2d2b;--muted:#bfae97;--gold:#d0a873;--orange:#e0703a;--green:#5fd39a;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--choc);color:var(--cream)}
body{font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
a:focus-visible{outline:3px solid var(--green);outline-offset:6px}
.skip{position:absolute;z-index:5;left:16px;top:16px;padding:12px;background:var(--cream);color:var(--ink);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto}

/* Cream masthead keeps the supplied logo artwork unchanged. */
.mast{background:var(--cream);display:flex;justify-content:center;padding:18px 24px;border-bottom:1px solid #d8cebf}
.mast img{width:clamp(150px,14vw,210px);height:auto;display:block}

main{flex:1;display:flex;flex-direction:column;background:radial-gradient(120% 70% at 50% 100%,rgba(150,106,68,.32),transparent 62%),var(--choc)}

/* Stage: photograph, script and a cut-out of the glasses stacked, so the garnishes and rims cross the lower edge of the lettering. */
.stage{--imgh:clamp(300px,min(calc(100vw / 2.629),50svh),620px);--ih:max(calc(100vw / 2.629),var(--imgh));--space:clamp(84px,11vw,190px);position:relative;height:calc(var(--ih) + var(--space));overflow:hidden;background:var(--deep);isolation:isolate}
.layer{position:absolute;bottom:0;left:50%;translate:-50% 0;width:max(100%,calc(var(--imgh) * 2.629));height:auto;aspect-ratio:2482/944;max-width:none;display:block}
.bg{z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.fg{z-index:2;pointer-events:none}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,var(--choc))}
.script{position:absolute;z-index:1;left:0;right:0;top:auto;bottom:calc(var(--ih) * var(--line,.86) - .52em);margin:0;padding:.18em 0 .32em;text-align:center;
  font-family:"Inspiration",cursive;font-weight:400;font-size:clamp(110px,19vw,330px);line-height:1;color:var(--orange);
  text-shadow:0 6px 40px rgba(0,0,0,.45);white-space:nowrap}

.copy{width:min(720px,calc(100% - 48px));margin:0 auto;padding:clamp(28px,5vw,56px) 0 clamp(40px,6vw,72px);text-align:center}
.eyebrow{margin:0;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.line{margin:18px 0 12px;font-size:clamp(28px,3.4vw,46px);font-weight:300;letter-spacing:-.03em;line-height:1.1}
.sub{margin:0 auto;max-width:42ch;font-size:16px;line-height:1.6;color:var(--muted)}
.contact{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;justify-content:space-between;gap:48px;align-items:center;min-height:52px;padding:14px 24px;margin-top:32px;background:var(--cream);color:var(--ink);border:1px solid var(--cream);font-size:13px;letter-spacing:.06em;text-decoration:none}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease)}
.contact:hover::before{transform:scaleY(1)}
.contact span:last-child{font-size:20px;line-height:1;transition:transform .7s var(--ease)}
.contact:hover span:last-child{transform:translate(3px,-3px)}
.email{margin:16px 0 0;font-size:13px;letter-spacing:.06em;color:var(--muted)}

.foot{display:flex;justify-content:space-between;gap:24px;padding:20px clamp(24px,5vw,72px) 26px;border-top:1px solid #3b2c20;background:var(--choc)}
.foot p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}

/* Teaser motion: the photograph settles, the script is written in behind the glasses, then the copy follows. */
@media (prefers-reduced-motion:no-preference){
  .bg,.fg{animation:settle 3.2s var(--ease) both}
  .script{animation:write 2.4s cubic-bezier(.65,0,.35,1) .6s both}
  .eyebrow,.line,.sub,.contact,.email{animation:rise 1.1s var(--ease) both}
  .eyebrow{animation-delay:1.6s}.line{animation-delay:1.75s}.sub{animation-delay:1.9s}.contact{animation-delay:2.05s}.email{animation-delay:2.15s}
  .stage{animation:breathe 9s ease-in-out 3.4s infinite alternate}
}
@keyframes settle{from{transform:scale(1.07);opacity:0}to{transform:none;opacity:1}}
@keyframes write{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes breathe{from{filter:brightness(1)}to{filter:brightness(1.08)}}

@media (max-width:760px){
  .stage{--imgh:clamp(280px,92vw,380px);--space:clamp(80px,24vw,110px)}
  .script{font-size:clamp(84px,27vw,140px);--line:.84}
  .foot{flex-direction:column;gap:6px;text-align:center}
}
@media (max-width:360px){.copy{width:calc(100% - 32px)}.contact{gap:24px}}