/* Hughes. Navy and gold sampled from the artwork - see the designs README.
   Phone first: everything below is written for 390px and widens from there. */
:root{
  --navy:#041841; --navy-2:#0a2456; --gold:#bc9f6a; --gold-soft:#d8c49a;
  --ink:#16202f; --muted:#5c6880; --line:#dde3ec; --bg:#f4f6f9; --card:#fff;
  --ok:#1c7a54; --warn:#8a5a00; --radius:14px;
  --pad:16px;                 /* the 16px side gutter the house rules ask for */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8edf5; --muted:#9aa6bd; --line:#26324a; --bg:#0b1220; --card:#121b2c;
  }
}
:root[data-theme="dark"]{
  --ink:#e8edf5; --muted:#9aa6bd; --line:#26324a; --bg:#0b1220; --card:#121b2c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;               /* the page never scrolls sideways */
}
.bar{background:var(--navy); color:#fff; padding:12px var(--pad); display:flex; align-items:center; gap:12px;
  min-height:68px}
.bar .mark{font-weight:700; letter-spacing:.18em; font-size:15px}
.bar .rule{height:2px; background:var(--gold); flex:1; max-width:56px; border-radius:2px}

/* --- LOGO ------------------------------------------------------------------
   Real artwork from 17/09/2026, taken from the estate's own LogoImages folder.

   THE WORDMARK ALREADY CONTAINS THE ROUNDEL, so the two are alternatives, never
   both at once - showing them together prints the H twice. One is display:none
   at each breakpoint, and a display:none image is not fetched, so a phone never
   downloads the desktop lockup.
     phone   : hughes-icon.png      the roundel alone, 44x44
     desktop : hughes-wordmark.png  the full lockup, 150x42                  */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-height:44px}
.brand-icon{width:44px;height:44px;flex:0 0 44px;display:block}
.brand-wordmark{display:none}

@media (min-width:700px){
  .brand-icon{display:none}
  .brand-wordmark{display:block;width:150px;height:42px;flex:0 0 150px}
  .bar{padding:14px 24px}
}

.wrap{max-width:720px; margin:0 auto; padding:var(--pad)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:14px}
h1{font-size:22px; margin:0 0 6px; letter-spacing:-.01em}
p.lede{color:var(--muted); margin:0 0 18px}
label{display:block; font-weight:600; font-size:14px; margin:14px 0 6px}
input{
  width:100%; padding:14px; font-size:16px;     /* 16px stops iOS zooming on focus */
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink);
}
input:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:transparent}
button{
  width:100%; min-height:52px;                  /* >= 44px tap target */
  margin-top:20px; padding:15px 18px; font-size:15px; font-weight:600;
  background:var(--navy); color:#fff; border:0; border-radius:4px; cursor:pointer;
  letter-spacing:.14em; text-transform:uppercase;
}
button:hover{background:var(--navy-2)}
/* The main site's primary action is gold with dark text - match it. */
.btn-gold{background:var(--gold); color:#20180a}
.btn-gold:hover{background:var(--gold-soft)}
button:disabled{opacity:.5; cursor:not-allowed}
button.secondary{background:transparent; color:var(--ink); border:1px solid var(--line)}
.msg{margin-top:16px; padding:12px 14px; border-radius:10px; font-size:15px; display:none}
.msg[data-kind="error"]{display:block; background:#fdecec; color:#8a1c1c; border:1px solid #f3c9c9}
.msg[data-kind="info"]{display:block; background:#eef4fb; color:#123a63; border:1px solid #cfe0f2}
.msg-contact{margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--muted)}
.msg-contact a{color:inherit; font-weight:600}
.msg-contact[hidden]{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .msg[data-kind="error"]{background:#3a1717; color:#ffd9d9; border-color:#5d2424}
  :root:not([data-theme="light"]) .msg[data-kind="info"]{background:#12263d; color:#cfe3fb; border-color:#1e3c5c}
}
.foot{color:var(--muted); font-size:13px; text-align:center; padding:8px var(--pad) 28px}
.foot a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ===== sign in ==============================================================
   Styled after hughes.com.au: navy field, gold primary action, uppercase
   letterspaced labels. NO background image at this stage, by request - the
   page is a flat navy field so the card carries the whole composition.      */
.signin-page{background:var(--navy);min-height:100dvh;display:flex;flex-direction:column}
.signin-wrap{flex:1;display:flex;align-items:center;justify-content:center;
  padding:28px var(--pad) 40px}
.signin-card{background:var(--card);border-radius:6px;padding:30px 24px 26px;
  width:100%;max-width:440px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.signin-card h1{font-size:25px;letter-spacing:-.01em;margin:0 0 8px}
.signin-card .lede{margin:0 0 22px}
.signin-card label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.signin-card input{border-radius:4px;padding:15px 14px}
.signin-help{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted);text-align:center}
.signin-help a{color:var(--ink)}

/* A hairline of gold under the banner, as the main site has. */
.signin-page .bar{border-bottom:2px solid var(--gold)}

@media (min-width:700px){
  .signin-card{padding:38px 36px 32px}
  .signin-card h1{font-size:28px}
}