/* emerald-bear.org — the door.
   Built to the delivered login design: full-bleed scene with the bear held
   left, brand lockup top-left, glass panel right, thin footer rail. Fluid
   throughout; below 1024px the panel moves under the artwork rather than
   sitting on top of the bear. */
:root{
  color-scheme:dark;
  --onyx:#05080a; --ink:#070b0d;
  --white:#f6f8f8; --silver:#cfd8db; --muted:#8fa0a4;
  --emerald:#12d39a; --emerald-br:#4bf0c2; --emerald-dk:#0a7f61;
  --glass:rgba(9,20,22,.72); --glass-line:rgba(18,211,154,.42);
  --focus:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.door-body{background:var(--onyx);color:var(--silver);
  font:400 15.5px/1.6 Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
:where(a,button):focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--emerald);
  color:#04120b;padding:12px 18px;font-weight:700}
.skip:focus{left:0}

/* ---------- stage ---------- */
.door{position:relative;isolation:isolate;min-height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(18px,2.6vw,34px) clamp(16px,3vw,48px);
  padding-bottom:calc(clamp(14px,2vw,22px) + env(safe-area-inset-bottom,0px))}
/* The clean plate is taller than it is wide (the design's right third was the
   panel, so it cannot be used as artwork). Cover-fitting that into a landscape
   window magnifies the bear and throws away the sunset. Instead the artwork
   keeps its own column on the left at close to its native proportions, and the
   page ground carries the right - which is the design's structure anyway. */
.door-art{position:absolute;inset:0 auto 0 0;z-index:0;width:min(74%,1180px)}
.door-art img{width:100%;height:100%;object-fit:cover;object-position:52% 46%;max-width:none}
/* Reads left to right: the bear keeps its light, the panel side goes dark
   enough to hold text, and the foot fades to the page ground so the footer
   rail does not sit on a hard edge. */
.door-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* Dissolve the artwork's right edge into the ground so the column reads as
       one scene rather than a picture with a border. */
    /* Fully opaque BEFORE the artwork column ends (74%), or the image's edge
       shows as a vertical seam against the page ground. */
    linear-gradient(90deg,rgba(5,8,10,.24) 0%,rgba(5,8,10,.05) 28%,
      rgba(5,8,10,.22) 46%,rgba(5,8,10,.72) 60%,var(--onyx) 71%,var(--onyx) 100%),
    linear-gradient(180deg,rgba(5,8,10,.66) 0%,rgba(5,8,10,.12) 18%,
      rgba(5,8,10,.14) 68%,rgba(5,8,10,.88) 100%)}

/* ---------- brand ---------- */
.door-brand{position:relative;z-index:2}
.door-brand img{width:clamp(210px,26vw,420px);height:auto;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.8))}

/* ---------- panel ---------- */
.door-main{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:flex-end;padding-block:clamp(16px,3vh,40px)}
.panel{width:min(100%,430px);padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,36px);
  text-align:center;border:1px solid var(--glass-line);border-radius:14px;
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 26px 70px -30px rgba(0,0,0,.95),
             0 0 46px -18px rgba(18,211,154,.42)}
.panel-compass{width:clamp(96px,11vw,132px);height:auto;margin:0 auto clamp(14px,2vw,20px);
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.7))}
.panel h1{margin:0;font:600 clamp(17px,2vw,23px)/1.2 Inter;letter-spacing:.3em;
  text-transform:uppercase;color:var(--white);padding-left:.3em}
.rule{margin:14px auto 0;width:74px;height:1px;
  background:linear-gradient(90deg,transparent,var(--emerald),transparent)}
.panel-lede{margin:18px 0 0;color:var(--silver);font-size:14.5px;line-height:1.6}

.panel-alert{margin:18px 0 0;padding:.75rem .9rem;border-radius:8px;
  border:1px solid #e06a6a;background:rgba(224,106,106,.12);color:#ffd9d9;
  font-size:13.5px;line-height:1.5;text-align:left}

/* The one control. Styled after the delivered LOG IN button: emerald gradient,
   inner highlight, wide tracking. */
.login{margin-top:clamp(18px,2.4vw,26px);min-height:56px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:.85rem 1.4rem;border-radius:10px;text-decoration:none;
  font:700 14px/1 Inter;letter-spacing:.24em;text-transform:uppercase;
  color:#04140f;
  background:linear-gradient(180deg,var(--emerald-br) 0%,var(--emerald) 52%,var(--emerald-dk) 100%);
  border:1px solid rgba(120,255,214,.6);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 0 30px -6px rgba(18,211,154,.7);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.login:hover{filter:brightness(1.07);box-shadow:0 0 0 1px rgba(255,255,255,.26) inset,
  0 0 44px -6px rgba(18,211,154,.9)}
.login:active{transform:translateY(1px)}
.login svg{width:20px;height:20px;flex:0 0 auto}
.login i{font-style:normal;font-size:17px}

.panel-fine{margin:14px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
.panel-fine a{color:var(--emerald);text-decoration:none}
.panel-fine a:hover{color:var(--emerald-br);text-decoration:underline;text-underline-offset:.2em}

/* ---------- footer rail ---------- */
.door-foot{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(12px,3vw,32px);
  padding-top:clamp(12px,2vw,20px);font:600 10.5px/1 Inter;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}
.door-foot .fr{margin-left:auto;display:flex;gap:10px;align-items:center}
.door-foot em{font-style:normal;color:rgba(143,160,164,.5)}
.fd{flex:1 1 auto;display:flex;align-items:center;gap:10px;min-width:0}
.fd i{flex:1 1 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(18,211,154,.55),transparent)}
.fd b{flex:0 0 auto;width:12px;height:12px;transform:rotate(45deg);border-radius:2px;
  background:linear-gradient(140deg,var(--emerald-br),var(--emerald-dk));
  box-shadow:0 0 14px rgba(18,211,154,.7)}

/* ---------- narrow ----------
   A portrait crop puts the bear behind the panel, so the panel drops below the
   artwork instead of covering it, and the scrim turns vertical. */
@media (max-width:1023px){
  /* Portrait: the panel over a portrait crop buries the bear behind a scrim
     heavy enough to read text through. Instead the artwork leads as a banner
     and the panel sits below it on the page ground - the subject stays the
     subject, and the copy gets a clean surface. */
  .door{display:flex;flex-direction:column;padding:0;min-height:100svh}
  .door-art{position:relative;inset:auto;width:100%;
    aspect-ratio:4/5;max-height:min(46svh,430px);overflow:hidden;flex:0 0 auto}
  .door-art img{object-position:40% 44%}
  .door-scrim{inset:auto 0 0 0;height:46%;
    background:linear-gradient(180deg,rgba(5,8,10,0) 0%,rgba(5,8,10,.70) 54%,
      var(--onyx) 100%)}
  .door-brand{order:-1;position:absolute;top:0;left:0;right:0;z-index:3;
    text-align:center;padding:clamp(14px,4vw,24px) 16px 0}
  .door-brand img{margin-inline:auto;width:clamp(180px,52vw,300px)}
  .door-main{justify-content:center;align-items:flex-start;flex:1 1 auto;
    padding:clamp(18px,5vw,30px) clamp(16px,5vw,24px) 0}
  .panel{width:min(100%,430px);margin-inline:auto}
  .door-foot{padding:clamp(22px,6vw,34px) clamp(16px,5vw,24px)
             calc(clamp(16px,4vw,22px) + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){ .fd i{display:none} .door-foot{gap:14px} }
@media (prefers-reduced-motion:reduce){ .login{transition:none} }