/* Sign-in page, "Two rooms": House of Wealth burgundy as a full-height wall on the left, the sign-in
   on paper on the right, and Wilson's medallion hung across the seam between them. */
:root{
  --burgundy:#872e30; --burgundy-lit:#a33a3d; --burgundy-glow:rgba(163,58,61,.22);
  --ivory:#f4ece4;
  --ink:#231a18; --ink-soft:#6f605c; --paper:#ffffff; --rule:#ddd3d0;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.4,.14,.2,1);
}
*{box-sizing:border-box} html,body{margin:0; min-height:100%}
body{font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.5}
:focus-visible{outline:2px solid var(--burgundy-lit); outline-offset:3px}
h1,p{margin:0}

/* The white logo SVG used as a mask, so it can be painted any colour. */
.logo{display:block; width:200px; aspect-ratio:272.67/51.27; background:currentColor;
  -webkit-mask:url(/img/howlogo-white.svg) center/contain no-repeat; mask:url(/img/howlogo-white.svg) center/contain no-repeat}

.medal{position:relative; width:var(--m); aspect-ratio:1; flex:none}
.medal .face{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 20%; background:#eee9e2}

/* Form — colours from the --f-* tokens set on body. */
form{display:grid; gap:16px}
label{display:grid; gap:6px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--f-label)}
input{font:inherit; font-size:17px; letter-spacing:normal; text-transform:none; color:var(--f-text); background:var(--f-bg);
  border:1px solid var(--f-line); border-radius:10px; padding:12px 14px; width:100%}
input:focus{border-color:var(--burgundy-lit); outline:none; box-shadow:0 0 0 3px var(--burgundy-glow)}
.error{color:var(--f-error); font-size:14px}
button{font:inherit; font-size:16px; font-weight:500; color:#fff; background:var(--burgundy); border:0; border-radius:10px;
  padding:13px; cursor:pointer; transition:background .2s var(--ease)}
button:hover{background:var(--burgundy-lit)}

body{--m:clamp(150px,16vw,210px); color:var(--ink); background:#faf7f6;
  --f-bg:var(--paper); --f-line:var(--rule); --f-text:var(--ink); --f-label:var(--ink-soft); --f-error:var(--burgundy)}
.shell{min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.brand{position:relative; background:var(--burgundy); color:var(--ivory); padding:40px clamp(28px,5vw,72px); display:flex; flex-direction:column}
.logo{color:var(--ivory)}
.medal{position:absolute; top:50%; right:calc(var(--m) / -2); transform:translateY(-50%); z-index:1}
/* Gold ring, a light-to-dark gradient so it reads as metal rather than flat yellow. */
.medal{padding:6px; border-radius:50%; background:linear-gradient(135deg, #e7cc85 0%, #b8893b 45%, #f0d998 70%, #a7772c 100%);
  box-shadow:0 18px 40px -18px rgba(35,26,24,.55)}
.name{margin-top:auto; font-size:clamp(56px,7.4vw,104px); font-weight:600; line-height:.92; letter-spacing:-.045em; max-width:5ch}
.langs{margin-top:18px; max-width:30ch; color:rgba(244,236,228,.72); font-weight:300; font-size:15px}
.panel{display:flex; flex-direction:column; justify-content:center; padding:48px clamp(28px,5vw,72px) 48px calc(var(--m) / 2 + clamp(40px,5vw,72px)); max-width:calc(var(--m) / 2 + 520px)}
h1{font-size:34px; font-weight:500; letter-spacing:-.025em}
.sub{color:var(--ink-soft); font-weight:300; margin:8px 0 12px}
.fine{color:var(--ink-soft); font-size:12.5px; margin-top:32px}
/* Language bar, below Sign in: a labelled segmented control; the chosen language is a solid
   burgundy pill. */
.seg{border:0; margin:14px 0 0; padding:22px 0 0; min-width:0; border-top:1px solid var(--rule)}
.seg legend{float:left; width:100%; padding:0; margin-bottom:10px; font-size:15px; font-weight:500; color:var(--ink)}
.seg .opts{clear:both; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:4px; background:#efe8e6; border-radius:12px}
.seg label{position:relative; display:block; text-transform:none; letter-spacing:normal; font-size:15px; font-weight:500; color:var(--ink-soft);
  text-align:center; padding:11px 4px; border-radius:9px; cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease)}
.seg input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.seg label:hover{color:var(--ink); background:rgba(255,255,255,.6)}
.seg label:has(input:checked){background:var(--burgundy); color:#fff; font-weight:600; box-shadow:0 6px 14px -6px rgba(135,46,48,.65)}
.seg label:has(input:focus-visible){outline:2px solid var(--burgundy-lit); outline-offset:2px}

@media (max-width:760px){
  .shell{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .brand{padding:28px 24px calc(var(--m) / 2 + 28px); min-height:300px}
  .name{font-size:56px; max-width:none; margin-top:56px}
  .medal{top:auto; bottom:calc(var(--m) / -2); right:24px; transform:none; --m:132px}
  .panel{padding:calc(132px / 2 + 28px) 24px 40px; max-width:none}
  .seg label{font-size:13.5px; padding:10px 2px}
}


@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }