/* ===========================================================================
   The Tin Fish — sign-in screen. wp-login.php loads no theme CSS: all of it
   is here, and it finds the photographs and faces by theme-relative URLs.

   Desktop: the oysters on ice fill the left, under the navy, with their
   blue-resin wave along the foot; the form stands on the right on pressed
   tin. Phone: the photograph is a band across the top.
   =========================================================================== */

@font-face{font-family:"Tin Fish Display";src:url("../fonts/big-shoulders.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Tin Fish Text";src:url("../fonts/mukta-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Tin Fish Text";src:url("../fonts/mukta-700.woff2") format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Tin Fish Script";src:url("../fonts/chalkvibes.woff2") format("woff2");font-weight:400;font-display:swap}

body.login{
  --navy:#06204A;--abyss:#031331;--cobalt:#003E8F;--ice:#B4D5FF;--gold:#C2912B;--gold-hi:#E2B04A;--chalk-y:#F3D985;
  position:relative;box-sizing:border-box;min-height:100vh;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px 48px calc(50vw + 24px);
  background:#E3EEFB url("../img/chart-lines.svg") center / cover no-repeat;
  font-family:"Tin Fish Text","Segoe UI",system-ui,sans-serif;color:#1D1E20;
}
body.login::before{content:"";position:fixed;inset:0 0 0 50vw;background:linear-gradient(180deg,rgba(242,244,248,.82),rgba(242,244,248,.9));pointer-events:none}

/* the photograph panel */
.tf-login-art{
  position:fixed;left:0;top:0;bottom:0;width:50vw;overflow:hidden;
  background:var(--navy) url("../img/hero-oysters.webp") 60% center / cover;
}
.tf-login-art::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(3,19,49,.55) 0%,rgba(3,19,49,.1) 35%,rgba(3,19,49,.25) 60%,rgba(3,19,49,.92) 100%),
    linear-gradient(90deg,rgba(3,19,49,.35),rgba(3,19,49,0) 60%);
}
.tf-login-art::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:min(150px,18vh);
  background:url("../img/wave-bottom.webp") center bottom / 100% 100% no-repeat;
}
.tf-login-art-in{position:absolute;left:clamp(28px,5vw,72px);right:clamp(28px,5vw,72px);bottom:calc(min(150px,18vh) + 24px);color:#fff}
.tf-login-script{margin:0 0 6px;font-family:"Tin Fish Script",cursive;font-size:clamp(26px,1rem + 1.6vw,40px);line-height:1.1;color:var(--chalk-y);transform:rotate(-2deg);transform-origin:left bottom}
.tf-login-big{margin:0;font-family:"Tin Fish Display","Arial Narrow",sans-serif;font-size:clamp(44px,1rem + 4.2vw,92px);font-weight:800;line-height:.88;letter-spacing:.01em;text-transform:uppercase;text-shadow:0 6px 30px rgba(3,19,49,.5)}
.tf-login-small{margin:14px 0 0;font-family:"Tin Fish Display","Arial Narrow",sans-serif;font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}

#login{position:relative;z-index:1;width:min(400px,100%);padding:0;margin:0}
.login h1 a{
  width:min(250px,70vw);height:116px;margin:0 auto 14px;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  /* the knock-out badge, set inline by PHP, sits on a navy disc of its own */
  filter:drop-shadow(0 10px 18px rgba(3,19,49,.25));
}
.login h1 a{background-color:transparent}
.login h1{position:relative}
.login h1::before{
  content:"";position:absolute;left:50%;top:-6px;width:min(270px,74vw);height:128px;transform:translateX(-50%);
  border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(6,32,74,.25),0 20px 40px -20px rgba(3,19,49,.7);
}
.login .tf-login-hello{
  margin:14px 0 16px;padding:0;border:0;background:transparent;box-shadow:none;text-align:center;
  font-family:"Tin Fish Display","Arial Narrow",sans-serif;font-size:14px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--cobalt);
}
.login .tf-login-hello span{display:block;margin-bottom:2px;font-family:"Tin Fish Script",cursive;font-size:34px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--gold)}
.login form{
  margin:0;padding:26px 26px 24px;border:1px solid rgba(6,32,74,.14);border-radius:18px;background:#fff;
  box-shadow:0 30px 70px -36px rgba(3,19,49,.55);
}
.login label{font-size:14px;font-weight:600;color:#1D1E20}
.login form .input,.login input[type=text],.login input[type=password],.login input[type=email]{
  min-height:48px;margin-top:6px;padding:8px 12px;border:1px solid rgba(6,32,74,.25);border-radius:10px;
  background:#F7F9FC;color:#1D1E20;font-size:16px;box-shadow:none;
}
.login form .input:focus,.login input[type=text]:focus,.login input[type=password]:focus,.login input[type=email]:focus{border-color:var(--cobalt);background:#fff;box-shadow:0 0 0 3px rgba(0,62,143,.18);outline:none}
.login .button.wp-hide-pw{height:48px;color:var(--cobalt)}
.login .button.wp-hide-pw:focus{border-color:var(--cobalt);box-shadow:0 0 0 2px rgba(0,62,143,.3)}
.login input[type=checkbox]{border-color:rgba(6,32,74,.4)}
.login input[type=checkbox]:checked::before{filter:hue-rotate(0deg)}
.wp-core-ui.login .button-primary{
  min-height:46px;padding:0 24px;border:0;border-radius:10px;background:var(--gold-hi);color:var(--abyss);
  font-family:"Tin Fish Display","Arial Narrow",sans-serif;font-size:17px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-shadow:none;
  box-shadow:0 12px 24px -14px rgba(194,145,43,.9);
}
.wp-core-ui.login .button-primary:hover,.wp-core-ui.login .button-primary:focus{background:var(--chalk-y);color:var(--abyss);box-shadow:0 0 0 3px rgba(194,145,43,.35)}
.login #nav,.login #backtoblog{margin:14px 0 0;padding:0;text-align:center;font-size:13px}
.login #nav a,.login #backtoblog a,.login .privacy-policy-page-link a{color:var(--cobalt);font-weight:600;text-decoration:none}
.login #nav a:hover,.login #backtoblog a:hover{color:var(--navy);text-decoration:underline}
.login .message,.login .notice,.login .success,.login #login_error{border-left-color:var(--cobalt);border-radius:10px;background:#fff;color:#1D1E20;box-shadow:0 10px 24px -18px rgba(3,19,49,.5)}
.login #login_error{border-left-color:#C7553A}
.login .language-switcher{position:relative;z-index:1}
.tf-login-tagline{
  position:relative;z-index:1;margin:22px 0 0;text-align:center;
  font-family:"Tin Fish Display","Arial Narrow",sans-serif;font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#5B6576;
}

/* phone and narrow tablet: the photograph becomes a band across the top */
@media (max-width:900px){
  body.login{justify-content:flex-start;padding:calc(min(42vh,340px) + 18px) 16px 40px}
  body.login::before{inset:0}
  .tf-login-art{position:absolute;right:0;width:auto;height:min(42vh,340px);bottom:auto}
  .tf-login-art::after{height:70px}
  .tf-login-art-in{bottom:84px}
  .tf-login-big{font-size:44px}
  .tf-login-small{display:none}
  #login{margin-top:-6px}
}