T46a Site · Owner's notes: short story names, aligned icons, a whole city title, tighter story tops, hidden scroll bars, a tablet step at 1024

frontend/src/styles.css

@@ -28,7 +28,8 @@
   color-scheme: dark;
 }
 
-* { box-sizing: border-box; }
+* { box-sizing: border-box; scrollbar-width: none; }
+*::-webkit-scrollbar { display: none; }
 
 html, body { margin: 0; background: var(--bg); color: var(--fg); }
 
@@ -97,7 +98,7 @@ main { min-height: 100vh; }
 .tally p > span:first-child { font-size: clamp(64px, 11vw, 176px); line-height: 0.9; font-weight: 800; letter-spacing: -0.05em; color: var(--fg); font-variant-numeric: tabular-nums; }
 
 .city { height: 100vh; min-height: 720px; display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: auto 1fr; gap: 48px 64px; padding: 160px 64px 96px; }
-.city h2 { grid-column: 1 / 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.city h2 { grid-column: 1 / 3; }
 .city > * { min-width: 0; }
 .city-iso { width: 100%; height: 100%; min-height: 420px; }
 .city-names { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 24px; font-size: 13px; line-height: 24px; align-self: end; }
@@ -130,14 +131,14 @@ main > :first-child { animation: enter 480ms ease-out both; }
 .titles a:hover, .side a:hover, .side a[aria-current="page"], .side-chapter[data-on] { color: var(--fg); }
 
 .reader { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; padding: 0 64px; }
-.side { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 64px 8px 64px 0; overscroll-behavior: contain; scroll-padding-block: 64px; }
+.side { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 32px 8px 64px 0; overscroll-behavior: contain; scroll-padding-block: 64px; }
 .side nav > div { margin-bottom: 4px; }
 .side-chapter { display: block; padding: 4px 0; font-size: 15px; font-weight: 500; }
 .side ol { list-style: none; margin: 4px 0 12px; padding: 0 0 0 14px; border-left: 1px solid var(--line); font-size: 13px; line-height: 20px; }
 .side li { padding: 4px 0; }
-.story { padding: 128px 0 96px; min-width: 0; }
+.story { padding: 96px 0 96px; min-width: 0; }
 .crumb { font-size: 14px; color: var(--muted); }
-.story h1 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; margin: 12px 0 64px; overflow-wrap: anywhere; }
+.story h1 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; margin: 8px 0 32px; overflow-wrap: anywhere; }
 
 .live { position: relative; height: 72vh; min-height: 520px; background: var(--bg); }
 .live iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
@@ -167,25 +168,31 @@ img.shot { display: block; max-width: 100%; height: auto; }
 .foot { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 48px 64px; font-size: 13px; color: var(--faint); }
 .foot a { text-decoration: underline; text-underline-offset: 3px; }
 
+@media (max-width: 1023px) {
+  .reader { grid-template-columns: minmax(0, 1fr); }
+  .side { display: none; }
+  .feature, .feature:nth-of-type(odd), .city { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 32px; }
+  .feature-words, .feature-iso, .feature-live, .feature:nth-of-type(odd) .feature-words, .feature:nth-of-type(odd) .feature-iso, .feature:nth-of-type(odd) .feature-live, .city h2 { grid-area: auto; }
+  .feature-iso { min-height: 280px; }
+  .feature-live { height: 70vh; min-height: 420px; }
+  .city { height: auto; }
+}
+
 @media (max-width: 767px) {
   .bar { padding: 0 16px; gap: 12px; }
   .bar .end { gap: 0; }
   .hero, .chapters, .missing { padding-left: 20px; padding-right: 20px; }
-  .reader { grid-template-columns: minmax(0, 1fr); padding: 0 20px; }
-  .side { display: none; }
+  .reader { padding: 0 20px; }
   .chapters li { grid-template-columns: 40px minmax(0, 1fr); }
   .chapters .titles { grid-column: 2; margin-top: 8px; }
   .foot { padding: 32px 20px; }
   .chapters .name { font-size: 22px; }
   .hero-iso { width: 100%; height: 55%; }
   .hero > :not(.iso) { max-width: none; }
-  .city { height: auto; }
   .hero h1, .chapters h1 { font-size: 13vw; }
   .feature h2, .city h2, .close h2 { font-size: 10vw; }
-  .feature, .feature:nth-of-type(odd), .city { grid-template-columns: 1fr; grid-template-rows: none; gap: 32px; padding: 112px 20px 48px; }
-  .feature-words, .feature-iso, .feature-live, .feature:nth-of-type(odd) .feature-words, .feature:nth-of-type(odd) .feature-iso, .feature:nth-of-type(odd) .feature-live, .city h2 { grid-area: auto; }
+  .feature, .city { padding: 112px 20px 48px; }
   .feature-iso { min-height: 220px; }
-  .feature-live { height: 70vh; min-height: 420px; }
   .tally { grid-template-columns: 1fr; padding: 112px 20px; }
   .city-iso { min-height: 260px; }
   .city-names { columns: 2; }