/* Landing page, "Two rooms" as on Ask Wilson's sign-in: the charcoal wall on the left, the language
   choice on paper on the right, and Ananthan's medallion hung across the seam between them. */
:root{
  --wall:#1c1f25; --accent:#1f3b63; --accent-lit:#2c5089; --accent-glow:rgba(44,80,137,.22);
  --ivory:#f3f1ec;
  --ink:#1b1d22; --ink-soft:#62666f; --paper:#ffffff; --rule:#dfdfdc;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",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(--accent-lit); outline-offset:3px}
h1,p{margin:0}

/* The black logo PNG used as a mask, so it can be painted ivory on the wall. */
.logo{display:block; width:260px; max-width:100%; aspect-ratio:969/155; background:var(--ivory);
  -webkit-mask:url(/img/anc-logo.png) left center/contain no-repeat; mask:url(/img/anc-logo.png) left 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:#e6e4df}

body{--m:clamp(150px,16vw,210px); color:var(--ink); background:#f7f6f3}
.shell{min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.brand{position:relative; background:var(--wall); color:var(--ivory); padding:40px clamp(28px,5vw,72px); display:flex; flex-direction:column}
.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(0,0,0,.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(243,241,236,.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 + 560px)}
h1{font-size:34px; font-weight:500; letter-spacing:-.025em; line-height:1.15}
h1 span{display:block; color:var(--ink-soft); font-weight:300; font-size:24px; margin-top:4px}

.choices{display:grid; gap:12px; margin-top:28px}
.choice{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 16px; text-decoration:none; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:18px 20px;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease)}
.choice .n{font-size:20px; font-weight:600; letter-spacing:-.01em}
.choice .l{grid-row:2; font-size:14.5px; color:var(--ink-soft); font-weight:300}
.choice .go{grid-row:1 / span 2; grid-column:2; width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:18px; transition:background .16s var(--ease)}
.choice:hover{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); transform:translateY(-1px)}
.choice:hover .go{background:var(--accent-lit)}
.fine{color:var(--ink-soft); font-size:12.5px; margin-top:32px}

@media (min-width:641px){ .m-only{display:none !important} }

@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}
  h1{font-size:28px} h1 span{font-size:20px}
}

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

/* Phone (≤640px): the dark one-screen landing from design_handoff_mobile_reader. */
@media (max-width:640px){
  .d-only{display:none !important}
  html,body{background:var(--wall); -webkit-tap-highlight-color:transparent}
  .m-landing{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--wall); color:var(--ivory);
    padding:calc(env(safe-area-inset-top, 0px) + 22px) max(24px, env(safe-area-inset-right, 0px)) max(40px, calc(env(safe-area-inset-bottom, 0px) + 16px)) max(24px, env(safe-area-inset-left, 0px))}
  .m-landing .logo{width:210px; color:var(--ivory)}
  .m-who{display:flex; align-items:center; gap:16px; margin-top:auto; padding-top:40px}
  .m-medal{width:84px; height:84px; flex:none; padding:4px; border-radius:50%; background:linear-gradient(135deg,#e7cc85 0%,#b8893b 45%,#f0d998 70%,#a7772c 100%)}
  .m-medal img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 20%; background:#e6e4df}
  .m-name{font-size:40px; font-weight:600; line-height:.95; letter-spacing:-.04em}
  .m-tag{margin-top:14px; color:rgba(243,241,236,.72); font-weight:300; font-size:15px; line-height:1.5}
  .m-eyebrow{margin-top:30px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:rgba(243,241,236,.72)}
  .m-choices{display:grid; gap:10px; margin-top:12px}
  .m-choice{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 16px; text-decoration:none; color:var(--ivory);
    background:#121419; border:1px solid rgba(243,241,236,.2); border-radius:14px; padding:16px 18px}
  .m-choice .n{font-size:19px; font-weight:600; letter-spacing:-.01em}
  .m-choice .l{grid-row:2; font-size:14px; font-weight:300; color:rgba(243,241,236,.72)}
  .m-choice .go{grid-row:1 / span 2; grid-column:2; width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
    background:var(--ivory); color:var(--wall); font-size:18px}
  .m-choice:hover,.m-choice:focus-visible{border-color:var(--ivory)}
  .m-fine{margin-top:22px; font-size:12.5px; line-height:1.5; color:rgba(243,241,236,.72)}
}