/* Comfort controls + modes */
html.fs-1 { zoom: 1.12; }
html.fs-2 { zoom: 1.25; }
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html.calm.js .reveal { opacity: 1; transform: none; }
html.hc { --forest-70: #13322b; --forest-50: #13322b; --forest-12: rgba(19,50,43,.45); --paper-70: #f6f1e7; --paper-14: rgba(246,241,231,.5); }
html.hc body { color: #0b1f1a; }
html.hc .chapter-dark { background: #0b1f1a; }
html.hc .btn-ghost { text-decoration-color: currentColor; }

.comfort { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; }
.comfort-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 46px; height: 46px; padding: 0;
  border-radius: 999px; border: 1px solid var(--forest-12); background: rgba(246,241,231,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--forest); font: 520 14px/1 var(--f-text); cursor: pointer;
  box-shadow: 0 10px 30px -14px rgba(19,50,43,.45);
}
.comfort-aa { font-family: var(--f-display); font-size: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--forest); color: var(--paper); }
.comfort-panel {
  position: absolute; right: 0; bottom: 56px; width: min(300px, calc(100vw - 32px));
  background: var(--paper); color: var(--forest); border: 1px solid var(--forest-12); border-radius: 18px;
  padding: 18px; box-shadow: 0 30px 60px -24px rgba(19,50,43,.45);
}
.comfort-panel[hidden] { display: none; }
.comfort-h { font-family: var(--f-display); font-size: 20px; margin-bottom: 12px; }
.comfort-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--forest-12); font-size: 15px; }
.comfort-note { font-size: 12.5px; color: var(--forest-50); margin-top: 8px; }
.seg { display: inline-flex; border: 1px solid var(--forest-12); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--forest); font: 560 14px/1 var(--f-text); min-width: 40px; height: 32px; border-radius: 999px; cursor: pointer; }
.seg button sup { font-size: 9px; }
.seg button[aria-pressed="true"] { background: var(--forest); color: var(--paper); }
.switch { width: 48px; height: 28px; border-radius: 999px; border: 1px solid var(--forest-50); background: transparent; position: relative; cursor: pointer; padding: 0; }
.switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--forest-50); transition: transform .25s var(--ease), background .25s; }
.switch[aria-checked="true"] { background: var(--forest); border-color: var(--forest); }
.switch[aria-checked="true"] span { transform: translateX(20px); background: var(--dawn); }
.comfort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* nav extras */
.nav a[aria-current="page"] { color: var(--forest); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dawn); margin-left: 6px; vertical-align: super; }
.btn-ghost.light { color: var(--paper); text-decoration-color: rgba(246,241,231,.5); }
.btn-ghost.light:hover { text-decoration-color: var(--paper); }

@media (max-width: 560px) {
  .comfort { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .comfort-btn { width: 40px; height: 40px; }
  .comfort-aa { width: 30px; height: 30px; font-size: 16px; }
  .comfort-panel { bottom: 50px; }
}