/* SwiftUI Quest — the first screen (welcome.html): what a visitor sees before signing in.
   It borrows the course's own pieces from style.css — the console window, the screenshot in its
   phone frame, the flash card, the stamps, the figure frame — and lays them out wider. */
body.welcome{
  background:radial-gradient(ellipse 58% 520px at 84% 190px, rgba(240,81,56,.13), rgba(240,81,56,0) 70%) no-repeat, var(--paper);
}
.wsheet{max-width:1080px; margin:0 auto; padding:0 34px 90px;}

/* ---------- top bar: the name, and the way back in ---------- */
.wbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 0 0;}
.brand{display:flex; align-items:center; gap:12px; font-family:"Spectral SC"; font-weight:500; font-size:17px; letter-spacing:.14em; white-space:nowrap;}
.brand .bird{width:60px; height:26px; margin:0;}
a.wsignin{
  font-family:"Spectral SC"; font-weight:500; font-size:13px; letter-spacing:.2em; white-space:nowrap;
  border:1px solid var(--rule); padding:8px 18px; color:var(--ink); transition:border-color .12s, color .12s;
}
a.wsignin:hover{border-color:var(--swift); color:var(--swiftsoft);}

/* ---------- the first screen proper ---------- */
.hero{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:58px; align-items:center;
  padding:56px 0 70px; min-height:min(740px, calc(100vh - 76px));
}
.hero .kicker{text-align:left; text-indent:0; margin:0 0 18px; font-size:13.5px;}
.hero h1{text-align:left; font-size:clamp(34px, 5.5vw, 64px); line-height:1.05; letter-spacing:.02em; margin:0 0 24px;}
.lede{font-size:19px; font-weight:300; line-height:1.6; max-width:540px; margin:0 0 32px;}
.join{margin:0;}
a.cta{
  display:inline-block; background:var(--swift); color:#1b1c20; border:none;
  font-family:"Spectral SC"; font-weight:600; font-size:17px; letter-spacing:.16em; padding:17px 34px;
  outline:1px solid var(--swift); outline-offset:4px; transition:background .15s, transform .15s;
}
a.cta:hover{background:#ff6a50; transform:translateY(-1px);}
a.cta:active{transform:none;}
a.cta:focus-visible, a.wsignin:focus-visible{outline:2px solid var(--ink); outline-offset:5px;}
.fine{font-size:14.5px; font-weight:300; color:var(--ink2); max-width:450px; margin:24px 0 0;}

/* two real things from the course, overlapping: a console run and a screenshot */
.exhibit{position:relative; min-width:0;}
.exhibit .console{width:min(84%, 400px); margin:6px 0 236px; transform:rotate(-1.5deg); box-shadow:0 26px 60px rgba(0,0,0,.5);}
.exhibit figure.shot{position:absolute; right:-20px; top:112px; width:186px; margin:0; transform:rotate(3deg);}
.exhibit figure.shot img{width:186px; max-width:none; box-shadow:0 26px 60px rgba(0,0,0,.55);}
.exhibit figure.shot figcaption{display:none;}          /* the caption below speaks for both */
.exhibit .caption{max-width:calc(100% - 196px); margin:0; font-size:15px; font-style:italic; font-weight:300; color:var(--ink2);}

/* ---------- the sections below ---------- */
.wsec{margin-top:104px;}
.thesis{
  font-family:"Spectral SC"; font-weight:500; font-size:clamp(21px, 3.1vw, 31px); letter-spacing:.03em; line-height:1.3;
  text-align:center; max-width:820px; margin:30px auto 16px;
}
.wlead{max-width:690px; margin:0 auto; text-align:center; font-weight:300; font-size:17.5px;}
.wsec figure.plate{max-width:920px; margin:38px auto 0;}

.wgrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:36px; align-items:start;}
.wcard{border:1px solid var(--rule); background:var(--panel); padding:22px 22px 24px; min-width:0;}
.wcard .label{margin-top:0;}
.wcard p{font-weight:300; margin:0 0 12px;}
.wcard p:last-child{margin-bottom:0;}
.wcard details.card{background:var(--paper); margin-top:16px;}
.kinds{display:flex; flex-wrap:wrap; gap:16px 14px; margin-top:20px;}
.kinds .exam-kind{position:static; display:inline-block; background:none;}   /* on a day page this stamp is pinned to a corner */
.kinds .exam-kind:nth-child(2){transform:rotate(1.5deg);}

.wparts{list-style:none; counter-reset:wpart; margin:36px auto 0; padding:0; max-width:920px; columns:2; column-gap:46px;}
.wparts li{
  counter-increment:wpart; position:relative; break-inside:avoid; padding:10px 0 10px 42px;
  border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; gap:14px; align-items:baseline;
}
.wparts li::before{
  content:counter(wpart); position:absolute; left:0; top:10px; width:26px; height:26px; border:1px solid var(--swift);
  color:var(--swift); border-radius:50%; text-align:center; font-family:"Spectral SC"; font-size:13px; line-height:24px;
}
.wparts .pl{font-family:"Spectral SC"; font-weight:500; font-size:11.5px; letter-spacing:.18em; color:var(--ink2); white-space:nowrap;}
.wcounts{display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin:48px 0 34px;}
.wcounts .stamp{min-width:150px;}
.wcounts .stamp .v{font-size:34px; margin:0; line-height:1.15;}

.closing{text-align:center;}
.closing h2{font-size:clamp(27px, 4vw, 40px); margin:0 0 16px;}
.closing .join{margin-top:34px;}
.closing .fine{max-width:none; margin-top:26px;}
.local .fine{display:none;}       /* opened from disk: there is no signing up, so nothing to say about it */

@media(max-width:860px){
  .wsheet{padding:0 18px 70px;}
  .wbar{padding-top:18px;}
  .brand{font-size:15px; gap:9px;}
  .brand .bird{width:46px; height:20px;}
  .hero{grid-template-columns:minmax(0,1fr); gap:44px; padding:40px 0 20px; min-height:0;}
  .lede{font-size:17.5px;}
  a.cta{display:block; text-align:center; padding:17px 14px; font-size:16px;}
  .exhibit .console{width:100%; margin:0 0 20px; transform:none;}
  .exhibit figure.shot{position:static; width:auto; transform:none; margin:0 0 16px;}
  .exhibit figure.shot img{width:170px; margin:0 auto;}
  .exhibit .caption{max-width:none; text-align:center;}
  .wsec{margin-top:74px;}
  .wgrid{grid-template-columns:minmax(0,1fr);}
  .wparts{columns:1;}
  .wcounts{gap:16px;}
  .wcounts .stamp{min-width:132px; flex:1 1 132px;}
}