/* Shared by register.html, apply.html and the two confirmation pages.
   index.html keeps its own inline styles: it is the one page where a single request matters.
   Tokens are copied from index.html rather than imported, so the two never fight over cascade
   order. If a token changes there, change it here. */

:root{
  color-scheme: only light;

  --navy:#0A2240; --gold:#C5A55A; --gold-light:#D4BC7C;
  --warm-white:#FDFBF7; --text:#2D2D2D; --text-light:#5A5A5A; --text-muted:#999999;
  --rule:#E5E0D8;
  --on-navy-strong:rgba(255,255,255,.80); --on-navy:rgba(255,255,255,.75);
  --on-navy-muted:rgba(255,255,255,.50);

  --font-serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,Arial,sans-serif;

  --t-h1:clamp(31px,4vw,44px);
  --t-lead:clamp(19px,2.2vw,22px);
  --t-body:18px;
  --t-small:17px;
  --t-meta:16px;
  --t-label:13px;

  --track-wide:1.5px;
  --radius:2px;
  --page:820px;
  --gut:clamp(22px,5vw,48px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--warm-white);color:var(--text);
  font-family:var(--font-sans);font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-wrap:pretty}
h1,h2{font-family:var(--font-serif);font-weight:500;color:var(--navy);margin:0}
p{margin:0}
a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold)}
a:hover{border-bottom-color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Masthead. Deliberately thin: this is a continuation of the page they came from,
   not a destination of its own. */
.mast{background:var(--navy);padding:18px 0}
.mast .page{display:flex;align-items:center;justify-content:space-between;gap:18px}
.mast a{color:var(--on-navy-strong);border-bottom:none;font-size:var(--t-meta);
  letter-spacing:.2px}
.mast a:hover{color:#fff}
.mast .back{font-size:var(--t-label);text-transform:uppercase;letter-spacing:var(--track-wide);
  color:var(--on-navy-muted)}
.mast .back:hover{color:var(--on-navy-strong)}

.page{max-width:var(--page);margin:0 auto;padding:0 var(--gut)}
main{padding:clamp(44px,7vw,76px) 0 clamp(60px,9vw,110px)}

.label{font-size:var(--t-label);text-transform:uppercase;letter-spacing:var(--track-wide);
  font-weight:500;color:var(--text-light);position:relative;padding-top:20px}
.label::before{content:'';position:absolute;top:0;left:0;width:28px;height:2px;background:var(--gold)}
h1{font-size:var(--t-h1);line-height:1.1;margin-top:16px}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--text-light);margin-top:18px;
  max-width:32em}
.gold-rule{width:44px;height:2px;background:var(--gold);margin:clamp(28px,4vw,40px) 0}

/* Form. Labels sit above their field: a summit page is read, not skimmed, and floating
   labels lose the question the moment someone starts typing. */
form{margin-top:clamp(24px,3vw,34px)}
fieldset{border:0;margin:0 0 clamp(26px,3.5vw,40px);padding:0}
legend{font-size:var(--t-label);text-transform:uppercase;letter-spacing:var(--track-wide);
  font-weight:600;color:var(--navy);padding:0 0 14px;border-bottom:1px solid var(--rule);
  width:100%;margin-bottom:22px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.f{margin-bottom:18px}
.f label{display:block;font-size:var(--t-small);color:var(--navy);font-weight:500;
  margin-bottom:7px}
.f .opt{color:var(--text-muted);font-weight:400}
.f .hint{display:block;font-size:var(--t-meta);color:var(--text-light);font-weight:400;
  line-height:1.5;margin-top:3px}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%;font-family:inherit;font-size:var(--t-small);color:var(--text);
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:12px 14px;line-height:1.5}
textarea{min-height:104px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),
  linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:2px solid var(--gold);
  outline-offset:1px}
input::placeholder,textarea::placeholder{color:var(--text-muted)}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:12px;align-items:flex-start;padding-top:22px;
  border-top:1px solid var(--rule)}
.consent input{margin:4px 0 0;width:17px;height:17px;flex:0 0 auto;accent-color:var(--navy)}
.consent label{font-size:var(--t-meta);line-height:1.6;color:var(--text-light)}

button{margin-top:clamp(26px,3vw,34px);font-family:inherit;font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:var(--track-wide);font-weight:600;
  color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:var(--radius);
  padding:16px 34px;cursor:pointer}
button:hover{background:#0d2b50;border-color:#0d2b50}

.foot{margin-top:clamp(34px,4vw,48px);padding-top:22px;border-top:1px solid var(--rule);
  font-size:var(--t-meta);color:var(--text-light)}

/* Confirmation pages */
.done h1{max-width:16em}
.done .lead{margin-top:22px}
.next{margin-top:clamp(30px,4vw,42px);padding:24px 28px;background:#fff;
  border-left:3px solid var(--gold);border-radius:var(--radius)}
.next p{font-size:var(--t-small);line-height:1.7}
.next p + p{margin-top:12px}

@media (max-width:640px){
  .row{grid-template-columns:1fr}
}