qupte font styling

src/css/shared.scss

 /* ===================================================================
    Shared styles — atmospheric horror scrollytelling
    =================================================================== */
-@use 'vars';
-@use 'fonts';
-@use 'mixins' as m; 
+@use "vars";
+@use "fonts";
+@use "mixins" as m;
 
 // ===== Reset =====
-* { box-sizing: border-box; margin: 0; padding: 0; }
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
-html, body {
+html,
+body {
   background: var(--bg);
   color: var(--ink);
   font-family: var(--font-body);
@@ -17,6 +22,10 @@ html, body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   overflow-x: clip;
+
+  @include m.bp(m.$bp-laptop) {
+    font-size: 18px;
+  }
 }
 
 body {
@@ -45,8 +54,13 @@ body {
 }
 
 @keyframes vignette-pulse {
-  0%, 100% { opacity: 0.85; }
-  50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0.85;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
 .flicker {
@@ -59,25 +73,49 @@ body {
 }
 
 @keyframes flicker {
-  0%, 92%, 100% { opacity: 0; }
-  93% { opacity: 1; }
-  94% { opacity: 0.2; }
-  95% { opacity: 0.9; }
-  96% { opacity: 0; }
+  0%,
+  92%,
+  100% {
+    opacity: 0;
+  }
+  93% {
+    opacity: 1;
+  }
+  94% {
+    opacity: 0.2;
+  }
+  95% {
+    opacity: 0.9;
+  }
+  96% {
+    opacity: 0;
+  }
 }
 
 [data-effects="off"] {
-  .grain, .vignette, .flicker { display: none; }
-  .reveal { opacity: 1; transform: none; }
+  .grain,
+  .vignette,
+  .flicker {
+    display: none;
+  }
+  .reveal {
+    opacity: 1;
+    transform: none;
+  }
   .glitch {
-    &::before, &::after { display: none; }
+    &::before,
+    &::after {
+      display: none;
+    }
   }
 }
 
 // ===== Top bar =====
 .topbar {
   position: fixed;
-  top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   z-index: 100;
   display: flex;
   align-items: center;
@@ -85,7 +123,9 @@ body {
   padding: 28px 40px;
   pointer-events: none;
 
-  > * { pointer-events: auto; }
+  > * {
+    pointer-events: auto;
+  }
 }
 
 .wordmark {
@@ -123,7 +163,9 @@ body {
   @include m.mono-label(11px, 0.2em);
   align-items: flex-end;
 
-  &:hover { color: var(--accent-bright); }
+  &:hover {
+    color: var(--accent-bright);
+  }
 
   &-lines {
     display: flex;
@@ -136,9 +178,15 @@ body {
       height: 1px;
       background: currentColor;
 
-      &:nth-child(1) { width: 28px; }
-      &:nth-child(2) { width: 20px; }
-      &:nth-child(3) { width: 28px; }
+      &:nth-child(1) {
+        width: 28px;
+      }
+      &:nth-child(2) {
+        width: 20px;
+      }
+      &:nth-child(3) {
+        width: 28px;
+      }
     }
   }
 }
@@ -153,7 +201,10 @@ body {
   pointer-events: none;
   transition: opacity 0.5s ease;
 
-  &.open { opacity: 1; pointer-events: auto; }
+  &.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
 
   &::before {
     content: "";
@@ -178,7 +229,9 @@ body {
   padding: 10px;
   z-index: 10;
 
-  &:hover { color: var(--accent-bright); }
+  &:hover {
+    color: var(--accent-bright);
+  }
 }
 
 .menu-inner {
@@ -217,7 +270,9 @@ body {
   outline: none;
   transition: border-color 0.2s;
 
-  &:focus { border-color: var(--accent); }
+  &:focus {
+    border-color: var(--accent);
+  }
 
   &::placeholder {
     color: var(--ink-faint);
@@ -250,13 +305,23 @@ body {
   scrollbar-width: thin;
   scrollbar-color: var(--accent-deep) transparent;
 
-  &::-webkit-scrollbar { width: 6px; }
-  &::-webkit-scrollbar-thumb { background: var(--accent-deep); }
-  &::-webkit-scrollbar-track { background: transparent; }
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--accent-deep);
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
 
   &.is-empty {
-    .menu-empty { display: block; }
-    .menu-part { display: none; }
+    .menu-empty {
+      display: block;
+    }
+    .menu-part {
+      display: none;
+    }
   }
 }
 
@@ -298,13 +363,19 @@ body {
     border-bottom: 1px solid var(--rule);
     transition: opacity 0.2s;
 
-    &.hidden { display: none; }
+    &.hidden {
+      display: none;
+    }
 
     &.current {
       position: relative;
 
-      a { color: var(--accent-bright); }
-      .num { color: var(--accent-bright); }
+      a {
+        color: var(--accent-bright);
+      }
+      .num {
+        color: var(--accent-bright);
+      }
       a::before {
         width: 2px;
         background: var(--accent-bright);
@@ -334,7 +405,10 @@ body {
     color: var(--ink);
     @include m.display-italic(22px);
     font-weight: 400;
-    transition: color 0.25s, padding 0.25s, background 0.25s;
+    transition:
+      color 0.25s,
+      padding 0.25s,
+      background 0.25s;
     position: relative;
     text-wrap: balance;
 
@@ -343,7 +417,9 @@ body {
       padding-left: 22px;
       background: rgba(185, 28, 28, 0.04);
 
-      &::before { width: 2px; }
+      &::before {
+        width: 2px;
+      }
     }
 
     &::before {
@@ -367,7 +443,9 @@ body {
     align-self: center;
   }
 
-  .title { line-height: 1.2; }
+  .title {
+    line-height: 1.2;
+  }
 }
 
 .menu-side {
@@ -413,7 +491,9 @@ body {
     @include m.mono-label(10px, 0.25em);
     color: var(--ink-dim);
 
-    .accent { color: var(--accent-bright); }
+    .accent {
+      color: var(--accent-bright);
+    }
   }
 }
 
@@ -445,7 +525,9 @@ body {
     height: 12px;
     background: var(--accent);
     border-radius: 50%;
-    box-shadow: 0 0 0 4px var(--bg), 0 0 20px var(--accent);
+    box-shadow:
+      0 0 0 4px var(--bg),
+      0 0 20px var(--accent);
   }
 }
 
@@ -455,7 +537,10 @@ body {
   display: block;
   padding: 28px;
   border: 1px solid var(--rule);
-  transition: border-color 0.3s, background 0.3s, transform 0.4s;
+  transition:
+    border-color 0.3s,
+    background 0.3s,
+    transform 0.4s;
   position: relative;
   overflow: hidden;
   min-height: 180px;
@@ -464,7 +549,9 @@ body {
     border-color: var(--accent);
     background: rgba(185, 28, 28, 0.05);
 
-    .arrow { color: var(--accent-bright); }
+    .arrow {
+      color: var(--accent-bright);
+    }
   }
 
   &.disabled {
@@ -473,17 +560,29 @@ body {
   }
 
   &.prev {
-    .arrow { left: 28px; }
-    &:hover .arrow { transform: translateX(-6px); }
+    .arrow {
+      left: 28px;
+    }
+    &:hover .arrow {
+      transform: translateX(-6px);
+    }
   }
 
   &.next {
     text-align: right;
-    .arrow { right: 28px; }
-    &:hover .arrow { transform: translateX(6px); }
+    .arrow {
+      right: 28px;
+    }
+    &:hover .arrow {
+      transform: translateX(6px);
+    }
   }
 
-  .label, .num-big, .title { display: block; }
+  .label,
+  .num-big,
+  .title {
+    display: block;
+  }
 
   .label {
     @include m.mono-label(11px, 0.25em);
@@ -512,7 +611,9 @@ body {
     bottom: 24px;
     @include m.mono-label(11px, 0.2em);
     color: var(--ink-faint);
-    transition: color 0.3s, transform 0.3s;
+    transition:
+      color 0.3s,
+      transform 0.3s;
   }
 }
 
@@ -528,7 +629,9 @@ body {
 .reveal {
   opacity: 0;
   transform: translateY(30px);
-  transition: opacity 1.2s ease, transform 1.2s ease;
+  transition:
+    opacity 1.2s ease,
+    transform 1.2s ease;
 
   &.in {
     opacity: 1;
@@ -569,10 +672,24 @@ body {
 }
 
 @keyframes glitch-shift {
-  0%, 88%, 100% { transform: translate(0, 0); opacity: 0; }
-  90% { transform: translate(-2px, 0.5px); opacity: 0.8; }
-  92% { transform: translate(2px, -0.5px); opacity: 0.6; }
-  94% { transform: translate(-1px, 0); opacity: 0.4; }
+  0%,
+  88%,
+  100% {
+    transform: translate(0, 0);
+    opacity: 0;
+  }
+  90% {
+    transform: translate(-2px, 0.5px);
+    opacity: 0.8;
+  }
+  92% {
+    transform: translate(2px, -0.5px);
+    opacity: 0.6;
+  }
+  94% {
+    transform: translate(-1px, 0);
+    opacity: 0.4;
+  }
 }
 
 // ===== Scroll progress bar =====
@@ -589,9 +706,15 @@ body {
 }
 
 // ===== Utility =====
-.mono { @include m.mono-label(11px, 0.15em); }
-.dim { color: var(--ink-dim); }
-.faint { color: var(--ink-faint); }
+.mono {
+  @include m.mono-label(11px, 0.15em);
+}
+.dim {
+  color: var(--ink-dim);
+}
+.faint {
+  color: var(--ink-faint);
+}
 
 ::selection {
   background: var(--accent);
@@ -608,7 +731,10 @@ body {
     gap: 16px;
   }
 
-  .menu-list { min-height: 50vh; padding-right: 8px; }
+  .menu-list {
+    min-height: 50vh;
+    padding-right: 8px;
+  }
 
   .menu-side {
     border-left: none;
@@ -621,10 +747,14 @@ body {
     justify-content: space-between;
     flex-wrap: wrap;
 
-    .menu-section-label { display: none; }
+    .menu-section-label {
+      display: none;
+    }
   }
 
-  .menu-about { display: none; }
+  .menu-about {
+    display: none;
+  }
 
   .menu-progress {
     margin-top: 0;
@@ -634,20 +764,34 @@ body {
     min-width: 200px;
   }
 
-  .menu-chapters { grid-template-columns: 1fr; }
+  .menu-chapters {
+    grid-template-columns: 1fr;
+  }
 }
 
 @include m.bp(m.$bp-mobile) {
-  .menu-close { top: 18px; right: 20px; }
-  .menu-inner { padding: 70px 20px 24px; }
-  .menu-list { min-height: 55vh; }
+  .menu-close {
+    top: 18px;
+    right: 20px;
+  }
+  .menu-inner {
+    padding: 70px 20px 24px;
+  }
+  .menu-list {
+    min-height: 55vh;
+  }
 
   .menu-chapters {
-    a { font-size: 19px; padding: 12px 0 12px 10px; }
-    .current::after { display: none; }
+    a {
+      font-size: 19px;
+      padding: 12px 0 12px 10px;
+    }
+    .current::after {
+      display: none;
+    }
   }
 
-  .menu-head { gap: 16px; }
+  .menu-head {
+    gap: 16px;
+  }
 }
-
-