/* Swift By Heart — 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 ---------- */
/* The bar may never make the page wider than the screen: if the name and the link do not fit
   side by side, the link goes onto a line of its own, still at the trailing edge. */
.wbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:24px 0 0;}
.brand{display:flex; align-items:center; gap:12px; min-width:0; font-family:"Spectral SC"; font-weight:500; font-size:17px; letter-spacing:.14em; white-space:nowrap;}
.brand .mark{width:50px; margin:0; flex:none;}
.brand em{font-family:"Spectral",serif; font-style:italic; font-weight:300; letter-spacing:0; color:var(--ink2); padding:0 .08em;}
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;
  flex:none; margin-left:auto;
}
a.wsignin:hover{border-color:var(--swift); color:var(--swiftsoft);}
/* In sound.html's frame the harp sits at the top right of the column (assets/player.css), so the bar ends short of it. */
.framed .wbar{padding-right:56px;}
@media(max-width:700px){.framed .wbar{padding-right:40px;}}

/* ---------- 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;}

/* the real app, from two real runs: in light mode behind, in dark mode in front */
.exhibit{position:relative; min-width:0;}
.exhibit .phones{position:relative; height:610px; margin:0 0 26px;}
.exhibit .phones figure.shot{position:absolute; top:0; width:246px; margin:0;}
.exhibit .phones figure.shot img{width:246px; max-width:none; box-shadow:0 30px 70px rgba(0,0,0,.6);}
.exhibit .phones figure.shot:first-child{left:0; top:44px; transform:rotate(-5deg);}
.exhibit .phones figure.shot:last-child{left:184px; transform:rotate(3deg);}
.exhibit .phones figure.shot figcaption{display:none;}  /* the caption below speaks for both */
.exhibit .caption, .tinyui .caption{margin:0; font-size:15px; font-style:italic; font-weight:300; color:var(--ink2);}
.exhibit .caption{max-width:430px;}

/* TinyUI, where the page talks about the language: its card, printed to the console */
.tinyui{max-width:470px; margin:42px auto 0;}
.tinyui .console{transform:rotate(-1deg); box-shadow:0 26px 60px rgba(0,0,0,.5); margin:0 0 16px;}
.tinyui .caption{text-align:center;}

/* ---------- 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 .mark{width:40px;}
  a.wsignin{font-size:12px; letter-spacing:.16em; padding:7px 14px;}
  .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 .phones{height:auto; display:flex; justify-content:center; align-items:flex-start; margin:0 0 44px;}   /* room for the lower phone's tilt */
  .exhibit .phones figure.shot{position:relative; left:auto; top:auto; flex:0 1 46%; max-width:196px; width:auto;}
  .exhibit .phones figure.shot img{width:100%;}
  .exhibit .phones figure.shot:first-child{left:auto; top:22px; transform:rotate(-4deg); margin-right:-14px;}
  .exhibit .phones figure.shot:last-child{left:auto; transform:rotate(3deg); z-index:1;}
  .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;}
}