:root{
  --navy:#102d52;
  --navy-deep:#091f3a;
  --cream:#f3eee4;
  --paper:#faf8f2;
  --gold:#b4965b;
  --line:rgba(16,45,82,.18);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Trebuchet MS",Arial,sans-serif;
}

*{box-sizing:border-box}
html{min-height:100%}
body{
  min-height:100vh;
  margin:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.portal-header{
  height:90px;
  padding:0 clamp(1.3rem,5vw,5rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.portal-header img{width:150px}
.portal-header>a:last-child{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.65rem;
}
.portal-header>a:last-child span{margin-left:.8rem}
main{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
}
.portal-intro{
  padding:clamp(4rem,8vw,8rem) clamp(1.5rem,7vw,7rem);
  background:var(--navy);
  color:var(--cream);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.eyebrow{
  margin:0 0 1.2rem;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.64rem;
}
h1,h2{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  line-height:1.06;
}
h1{
  max-width:12ch;
  font-size:clamp(3rem,6vw,6.5rem);
  letter-spacing:-.035em;
}
h2{font-size:2.7rem}
.intro-copy{
  max-width:47rem;
  margin:2rem 0 3.2rem;
  font-family:var(--serif);
  font-size:clamp(1rem,1.4vw,1.25rem);
}
.preview-timeline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  list-style:none;
  padding:0;
  margin:0;
}
.preview-timeline li{
  position:relative;
  padding:1.7rem .8rem 0 0;
  border-top:1px solid rgba(243,238,228,.3);
}
.preview-timeline li::before{
  content:"";
  position:absolute;
  top:-5px;
  left:0;
  width:9px;
  height:9px;
  border:1px solid rgba(243,238,228,.55);
  border-radius:50%;
  background:var(--navy);
}
.preview-timeline li.complete{border-color:var(--cream)}
.preview-timeline li.complete::before{background:var(--cream)}
.preview-timeline li.current::before{
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 0 0 5px rgba(180,150,91,.18);
}
.preview-timeline span{
  display:block;
  color:var(--gold);
  font-size:.58rem;
  letter-spacing:.12em;
}
.preview-timeline strong{
  display:block;
  margin-top:.3rem;
  padding-right:.7rem;
  font-size:.68rem;
  font-weight:400;
  line-height:1.35;
}
.access-panel{
  padding:clamp(4rem,7vw,7rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.access-panel>p:not(.eyebrow):not(.access-note){
  max-width:28rem;
  margin:1.4rem 0 2rem;
}
.lock-mark{
  width:56px;
  height:56px;
  position:relative;
  border:1px solid var(--navy);
  margin-bottom:2.3rem;
}
.lock-mark::before{
  content:"";
  position:absolute;
  width:18px;
  height:17px;
  top:9px;
  left:18px;
  border:1px solid var(--navy);
  border-bottom:0;
  border-radius:12px 12px 0 0;
}
.lock-mark span{
  position:absolute;
  width:26px;
  height:20px;
  top:25px;
  left:14px;
  border:1px solid var(--navy);
}
.primary-button{
  width:max-content;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:1rem 1.2rem;
  background:var(--navy);
  color:var(--cream);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.64rem;
}
.primary-button:hover{background:var(--gold);color:var(--navy)}
.access-note{
  max-width:25rem;
  margin-top:1.5rem;
  color:rgba(16,45,82,.62);
  font-size:.7rem;
}
footer{
  min-height:54px;
  padding:0 clamp(1.3rem,5vw,5rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  font-size:.6rem;
  letter-spacing:.08em;
}
@media(max-width:900px){
  main{grid-template-columns:1fr}
  .portal-intro{min-height:630px}
  .access-panel{min-height:480px}
}
@media(max-width:580px){
  .portal-header{height:76px;padding:0 1rem}
  .portal-header img{width:125px}
  .portal-header>a:last-child{font-size:.52rem}
  .portal-intro,.access-panel{padding:4rem 1.25rem}
  .portal-intro{min-height:590px}
  .preview-timeline{grid-template-columns:1fr}
  .preview-timeline li{
    border-top:0;
    border-left:1px solid rgba(243,238,228,.3);
    padding:0 0 1.4rem 1.6rem;
  }
  .preview-timeline li::before{top:3px;left:-5px}
  .preview-timeline li.complete{border-left-color:var(--cream)}
  footer{padding:1rem;align-items:flex-start;gap:.5rem;flex-direction:column}
}