@font-face {
  font-family: Satoshi;
  src: url("./assets/fonts/satoshi-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("./assets/fonts/satoshi-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "La Belle Aurore";
  src: url("./assets/fonts/la-belle-aurore-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --surface: #000;
  --navy: #071d43;
  --w: 310px;
  --h: 542.5px;
  font-family: Satoshi, "Avenir Next", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--surface); }
button { font: inherit; }
.site-shell {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #000;
}
.site-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}
.masthead {
  position: absolute;
  z-index: 80;
  top: clamp(24px, 3.6vw, 40px);
  left: clamp(22px, 4vw, 52px);
  right: clamp(22px, 4vw, 52px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #eeeae3;
}
.masthead-title {
  display: inline-block;
  font-family: "La Belle Aurore", "Bradley Hand", cursive;
  font-size: clamp(27px, 2.9vw, 35px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
  transform: rotate(-2deg);
  white-space: nowrap;
}
.volume {
  color: #aaa8a2;
  font-family: "La Belle Aurore", "Bradley Hand", cursive;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.main-content, .viewer, .scene { position: absolute; inset: 0; }
.viewer { isolation: isolate; }
.ambient { position: absolute; border-radius: 50%; pointer-events: none; }
.ambient-one { width: 58%; height: 75%; left: 21%; top: 5%; background: radial-gradient(ellipse, #657b9a29, #34415f0c 42%, transparent 72%); }
.ambient-two { width: 66%; height: 19%; left: 17%; bottom: 6%; background: radial-gradient(ellipse, #00000091, transparent 71%); filter: blur(17px); }
.scene {
  perspective: 1100px;
  perspective-origin: 50% 48%;
  touch-action: none;
  --scale: 1;
  --offset: -155px;
}
.book-motion {
  position: absolute;
  width: var(--w);
  height: var(--h);
  left: calc(50% + var(--offset));
  top: 50%;
  transform-origin: 0 50%;
  transform: translateY(-50%) scale(var(--scale));
  transform-style: preserve-3d;
  transition: transform 1050ms cubic-bezier(.2,.75,.2,1), left 1050ms cubic-bezier(.2,.75,.2,1);
}
.book {
  position: absolute;
  inset: 0;
  width: var(--w);
  height: var(--h);
  transform-origin: 50% 50%;
  transform: translateY(var(--float, 0px)) rotateX(var(--pitch, 13deg)) rotateY(var(--yaw, -27deg)) rotateZ(var(--roll, -2.5deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.scene.is-settling .book { transition: transform var(--settle-duration, 800ms) cubic-bezier(.18,.75,.18,1); }
.scene.is-open .book { transition: transform 1050ms cubic-bezier(.18,.75,.18,1); transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
.scene:not(.is-open) .book-motion { cursor: grab; }
.scene.is-dragging .book-motion { cursor: grabbing; }
.book-shadow {
  position: absolute;
  left: 50%;
  top: 78%;
  width: min(370px, 70%);
  height: 95px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #000000c7, #03050a75 49%, transparent 76%);
  filter: blur(26px);
  opacity: .78;
  transition: width 1050ms, opacity 500ms, transform 500ms cubic-bezier(.16,1,.3,1);
}
.scene.is-open .book-shadow { width: min(720px, 87%); opacity: .64; }
.scene.is-hovered .book-shadow { opacity: .55; transform: translateX(-50%) scale(1.12); }

.cover {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  transform-style: preserve-3d;
  transform-origin: left center;
}
.cover-face {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px 23px 23px 5px;
  background-color: var(--navy);
  background-image: radial-gradient(ellipse 82% 62% at 21% 15%, #738fac2b, transparent 66%), radial-gradient(ellipse 80% 64% at 89% 81%, #31578731, transparent 70%), linear-gradient(117deg, #061632, #0d2a59 30%, #0c2856 65%, #051833);
  box-shadow: inset 0 0 0 1px #06152a, inset 2px 2px 7px #9bb6d323, inset -5px -5px 14px #0109167a, 0 18px 28px #0008;
}
.cover-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.52' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.cover-face::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 1px 1px 2px #bed4ed5c, inset -3px -3px 6px #020a1eaa;
}
.cover-face.inside {
  transform: rotateY(180deg) translateZ(3px);
  background-image: radial-gradient(ellipse at 30% 15%, #45648b29, transparent 60%), linear-gradient(105deg, #071934, #0b2856 52%, #061934);
  box-shadow: inset 0 0 0 1px #031126, inset 0 0 25px #9eb8d322;
}
.cover-edge {
  position: absolute;
  display: block;
  pointer-events: none;
  background: linear-gradient(90deg, #020b19, #153b6b 35%, #071b3b 78%, #010914);
  box-shadow: inset 0 0 2px #a9c4e64b;
  backface-visibility: visible;
}
.edge-free {
  right: -3px;
  top: 24px;
  bottom: 24px;
  width: 6px;
  border-radius: 2px;
  transform: rotateY(90deg);
}
.edge-top,
.edge-bottom {
  left: 5px;
  right: 23px;
  height: 6px;
  background: linear-gradient(90deg, #061630, #173b68 42%, #0a234d 90%);
}
.edge-top {
  top: 0;
  transform-origin: center top;
  transform: translateZ(-3px) rotateX(90deg);
}
.edge-bottom {
  bottom: 0;
  transform-origin: center bottom;
  transform: translateZ(-3px) rotateX(-90deg);
}
.edge-curve {
  height: 6px;
  transform-origin: center center;
  background: linear-gradient(#0b2b56, #133b70 50%, #061630);
  box-shadow: none;
}
.front-cover .outside { transform: translateZ(3px); }
.back-cover .outside {
  transform: rotateY(180deg) translateZ(3px);
  border-radius: 23px 5px 5px 23px;
}
.back-cover .inside { transform: translateZ(3px); }
.front-cover .inside { transform: rotateY(180deg) translateZ(3px); }
.cover-face.outside .cover-sheen { opacity: .68; }
.stitches {
  position: absolute;
  inset: 10px 9px 10px 11px;
  border: 1px dashed #91abc1;
  border-left: 0;
  border-radius: 0 16px 16px 0;
  opacity: .57;
  filter: drop-shadow(0 1px .5px #000b20);
}
.front-cover .inside { border-radius: 23px 5px 5px 23px; }
.front-cover .inside { backface-visibility: visible; -webkit-backface-visibility: visible; }
.front-cover .inside .stitches {
  border-left: 1px dashed #7599c0;
  border-right: 0;
  border-radius: 16px 0 0 16px;
}
.back-cover .outside .stitches {
  border-left: 1px dashed #91abc1;
  border-right: 0;
  border-radius: 16px 0 0 16px;
}
.front-cover {
  z-index: 40;
  cursor: grab;
  transform: translateZ(25px) rotateY(0deg);
  transition: transform 1050ms cubic-bezier(.25,.7,.15,1);
}
.front-cover:focus-visible { outline: 2px solid #d7cbb2; outline-offset: 6px; }
.scene.is-open .front-cover { pointer-events: none; transform: translateZ(-27px) rotateY(-180deg); }
.cover-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 155px 250px at var(--glint-x, 49%) var(--glint-y, 35%), #c5d7e326, transparent 78%), linear-gradient(109deg, transparent 38%, #ffffff18 50%, transparent 61%);
}
.sticker-layer {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transform: translateZ(1px);
  transform-style: preserve-3d;
}
.sticker {
  position: absolute;
  display: block;
  object-fit: fill;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(.35px 1.1px .8px #0007);
}
.back-cover { z-index: 1; transform: translateZ(-28px); }
.spine {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  transform: translateZ(-31px);
  transform-style: preserve-3d;
  transition: opacity 300ms;
}
.scene.is-open .spine { opacity: 0; }
.spine::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 59px;
  height: 100%;
  background: linear-gradient(90deg, #06152d, #153e70 16%, #0b2d5d 48%, #133b70 82%, #06152e);
  box-shadow: inset 0 0 7px #020a1d, inset 1px 0 3px #9bb9da50;
  transform-origin: left center;
  transform: rotateY(-90deg);
  backface-visibility: visible;
}

.paper-block {
  position: absolute;
  z-index: 3;
  left: 7px;
  right: 7px;
  top: 7px;
  bottom: 7px;
  border-radius: 2px 15px 15px 2px;
  background: #eee7d7;
  transform: translateZ(-22px);
  transform-style: preserve-3d;
  transition: opacity 200ms;
}
.paper-block::before,
.paper-block::after,
.paper-block-top,
.paper-block-bottom {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  backface-visibility: visible;
}
.paper-block::before {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ded4c2, #f8f2e6 8%, #f9f3e8 85%, #e9dfcc);
  box-shadow: inset -5px 0 12px #75674d27;
  transform: translateZ(40px);
}
.paper-block::after {
  top: 0;
  right: 0;
  width: 40px;
  bottom: 0;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #e5ddc9 0 1px, #fbf5e9 1px 3px, #eee5d2 3px 4px);
  box-shadow: inset 0 0 8px #a99b8057, 1px 0 3px #0004;
  transform-origin: right center;
  transform: rotateY(90deg);
}
.paper-block-top,
.paper-block-bottom {
  left: 0;
  width: calc(100% - 15px);
  height: 40px;
  background: repeating-linear-gradient(180deg, #e5ddca 0 1px, #f9f3e8 1px 3px, #e9e0cd 3px 4px);
  box-shadow: inset 0 0 7px #8b7e6538;
}
.paper-block-top { top: 0; transform-origin: center top; transform: rotateX(90deg); }
.paper-block-bottom { bottom: 0; transform-origin: center bottom; transform: rotateX(-90deg); }
.paper-block-curve {
  position: absolute;
  display: block;
  height: 40px;
  pointer-events: none;
  backface-visibility: visible;
  background: repeating-linear-gradient(180deg, #e5ddc9 0 1px, #fbf5e9 1px 3px, #eee5d2 3px 4px);
  box-shadow: inset 0 0 4px #9c8d7052;
}
.scene.is-open .paper-block { opacity: 0; }
.last-page { z-index: 5; transform: translateZ(19.5px); transition: transform 1050ms cubic-bezier(.2,.75,.2,1); }
.scene.is-open .last-page { transform: translateZ(-13.5px); }
.sheets { position: absolute; inset: 0; z-index: 20; transform: translateZ(10px); transform-style: preserve-3d; pointer-events: none; transition: transform 1050ms cubic-bezier(.2,.75,.2,1); }
.scene.is-open .sheets { transform: translateZ(-20px); }
.sheet {
  position: absolute;
  inset: 6px 8px 8px 7px;
  visibility: hidden;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 860ms cubic-bezier(.2,.72,.15,1);
  pointer-events: none;
}
.sheet.is-turning { transition-timing-function: cubic-bezier(.25,.8,.3,1); }
.scene.is-gathering-pages .sheet { transition-duration: 640ms; }
.paper-face {
  position: absolute;
  inset: 6px 8px 8px 7px;
  overflow: hidden;
  border-radius: 8px 14px 17px 8px;
  background: radial-gradient(ellipse 100% 80% at 39% 37%, #fffaf0, transparent 83%), linear-gradient(90deg, #e8dfcd 0%, #f6f1e6 7%, #f8f4ea 64%, #eee5d4 100%);
  box-shadow: inset 7px 0 15px #43382224, inset -5px 0 11px #71614720;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sheet .paper-face { inset: 0; }
.sheet .paper-face.front { transform: translateZ(.55px); }
.sheet .paper-face.back { transform: rotateY(180deg) translateZ(.55px); border-radius: 14px 8px 8px 17px; }
.paper-face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.43' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23a)' opacity='.065' d='M0 0h100v100H0z'/%3E%3C/svg%3E");
}
.sheet.is-turned .paper-face.back { box-shadow: inset -7px 0 15px #43382224, inset 5px 0 11px #71614720; }
.sheet.is-turned .paper-face.back .page-gutter { left: auto; right: 0; transform: scaleX(-1); }
.binding-seam {
  position: absolute;
  z-index: 25;
  left: -4px;
  top: 10px;
  bottom: 10px;
  width: 14px;
  background: linear-gradient(90deg, #091b3b00, #071830 25%, #514f4b 48%, #c8c0b2 68%, #f4eee200);
  box-shadow: 2px 0 4px #1b1d2050;
  transform: translateZ(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms;
}
.scene.is-open .binding-seam { opacity: 1; }
.scene.has-left-page .binding-seam {
  background: linear-gradient(90deg, transparent, #d0c5b3 28%, #776d60 51%, #e8e0d2 75%, transparent);
  box-shadow: 2px 0 4px #42392e29;
}
.page-content { position: absolute; inset: 29px 19px 24px 25px; color: #77766e; font-family: Arial, sans-serif; font-size: 10px; }
.page-head { height: 49px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #8e8c83; padding-bottom: 5px; }
.page-codes { display: flex; flex-direction: column; gap: 4px; }
.weather, .weekdays { display: flex; gap: 1px; }
.weather span, .weekdays span { height: 12px; min-width: 17px; border: 1px solid #aaa89c; text-align: center; line-height: 10px; font-size: 8px; }
.weather span { font-size: 11px; }
.weather .rain-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M3.4 7.5c-1.2 0-2-.8-2-1.8 0-1.1.8-1.9 1.9-1.9.3-1.6 1.6-2.6 3.1-2.6 1.3 0 2.4.7 2.9 1.8.4-.3.9-.4 1.5-.4 1.4 0 2.5 1 2.6 2.3 1.1.1 1.8.9 1.8 1.9 0 1-.8 1.7-1.9 1.7z' fill='none' stroke='%2377766e' stroke-width='.8'/%3E%3Cpath d='m5.6 8.3-.7 2.3m3.9-2.3-.7 2.3m3.9-2.3-.7 2.3' stroke='%2377766e' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px 11px no-repeat;
}
.page-fields { display: flex; flex-direction: column; gap: 2px; font-size: 10px; white-space: nowrap; }
.page-fields span { display: flex; gap: 4px; }
.page-fields i { display: inline-block; width: 72px; border-bottom: 1px solid #aca99c; transform: translateY(-3px); }
.page-fields .date i { width: 13px; margin-left: 4px; }
.page-rules { position: absolute; left: 0; right: 0; top: 88px; bottom: 25px; display: flex; flex-direction: column; justify-content: space-between; }
.page-rules span { display: block; width: 100%; border-bottom: 1px dotted #aaa89b; opacity: .8; }
.page-bottom { position: absolute; left: 0; right: 0; bottom: 2px; border-bottom: 1px solid #aaa89b; }
.first-page-note {
  position: absolute;
  top: 82px;
  bottom: 5px;
  left: 2px;
  right: 3px;
  color: #323b3e;
  font-family: "La Belle Aurore", "Bradley Hand", cursive;
  font-size: 23px;
  line-height: 1.18;
  transform: rotate(-.35deg);
}
.note-title { display: block; margin-bottom: 27px; text-align: center; }
.note-body { margin: 0; white-space: pre-line; }
.note-signoff {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.note-signature { font-size: 19px; }
.page-gutter { position: absolute; top: 0; bottom: 0; left: 0; width: 25px; background: linear-gradient(90deg, #473c2d39, #64584320 46%, transparent); }

.strap {
  position: absolute;
  z-index: 60;
  left: calc(100% - 2px);
  top: 44%;
  width: 0;
  height: 65px;
  transform-style: preserve-3d;
  pointer-events: none;
}
.strap-anchor,
.strap-wrap,
.strap-flap {
  position: absolute;
  top: 0;
  height: 100%;
  border: 1px solid #041733;
  background: linear-gradient(180deg, #183965, #0d2a56 28%, #0a2046 76%, #05152f);
  box-shadow: inset 0 1px 2px #9ab9d45c, inset 0 -3px 6px #000d27a3;
}
.strap-anchor {
  left: -45px;
  width: 46px;
  border-radius: 5px 0 0 5px;
  transform: translateZ(-30px);
}
.strap-wrap {
  left: 0;
  width: 61px;
  border-right: 0;
  border-radius: 0;
  box-shadow: inset 0 1px 2px #9ab9d45c, inset 0 -3px 6px #000d27a3;
  transform-origin: left center;
  transform: translateZ(-30px) rotateY(-90deg);
  transform-style: preserve-3d;
  transition: transform 860ms cubic-bezier(.4,0,.6,1);
}
.strap-wrap::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 15px;
  pointer-events: none;
  background: linear-gradient(90deg, #04122c00, #5473985c 45%, #0a285172 70%, #04132d00);
  border-radius: 50% / 8%;
  transform: translateZ(1px);
  z-index: 2;
}
.strap-flap {
  left: -93px;
  width: 154px;
  border-right: 0;
  border-radius: 7px 0 0 7px;
  box-shadow: 0 3px 6px #0005, inset 0 1px 2px #9ab9d45c, inset 0 -2px 4px #000d276b;
  transform-origin: right center;
  transform: rotateY(90deg);
  transform-style: preserve-3d;
  transition: transform 860ms cubic-bezier(.4,0,.6,1);
}
.scene.is-unfastened .strap-wrap { transform: translateZ(-30px) rotateY(-65deg); }
.scene.is-unfastened .strap-flap { transform: rotateY(255deg); }
.snap {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: url("./assets/stickers/snap-metal.png") calc(50% - 1.6px) calc(50% + .8px) / 118% 112% no-repeat;
  box-shadow: 0 1px 2px #000b, 0 0 0 .6px #1c2530;
  filter: brightness(.78) contrast(1.1);
  backface-visibility: hidden;
}
.strap-sticker {
  position: absolute;
  left: 58px;
  top: 18px;
  width: 73px;
  height: 29px;
  background: #030303 url("./assets/stickers/property-label.png") center / cover no-repeat;
  border: 1px solid #ebeee9;
  box-shadow: 0 1px 2px #0009;
  transform: translateZ(1.5px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ribbon {
  position: absolute;
  z-index: 38;
  left: 21px;
  bottom: -59px;
  width: 9px;
  height: 75px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #0b0c10, #353538 48%, #08090b);
  transform: translateZ(2px) rotate(9deg);
  transform-origin: top center;
  box-shadow: 2px 1px 2px #0004;
  transition: transform 1050ms cubic-bezier(.2,.75,.2,1), opacity 1050ms;
}
.ribbon::after { content: ""; position: absolute; bottom: -2px; left: 0; border-bottom: 7px solid #151519; border-right: 9px solid transparent; }
.scene.is-open .ribbon { transform: translateZ(-12px) rotate(12deg) scaleY(.38); opacity: .82; }
.site-footer {
  position: fixed;
  z-index: 90;
  bottom: clamp(24px, 4vw, 43px);
  left: clamp(22px, 4vw, 52px);
  right: clamp(22px, 4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.toggle-button,
.portfolio-link {
  min-height: 44px;
  border: 1px solid #585a5a;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, transform 280ms cubic-bezier(.2,.7,.2,1);
}
.toggle-button {
  display: grid;
  place-items: center;
  width: 164px;
  padding: 0 20px;
  background: #111417;
  border-color: #45494a;
  color: #c8c4bd;
  font-family: Satoshi, "Avenir Next", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}
.toggle-label {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.7,.2,1);
}
.toggle-button[data-phase="closed"] [data-label="closed"],
.toggle-button[data-phase="opening"] [data-label="opening"],
.toggle-button[data-phase="open"] [data-label="open"],
.toggle-button[data-phase="closing"] [data-label="closing"] { opacity: 1; transform: translateY(0); }
.portfolio-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 0 18px;
  background: #111417;
  color: #c8c4bd;
  font-family: Satoshi, "Avenir Next", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-color: #45494a;
}
.toggle-button:hover:not(:disabled), .portfolio-link:hover { background: #1c2023; color: #f5f1e8; border-color: #8b8c88; transform: translateY(-2px); }
.toggle-button:active:not(:disabled), .portfolio-link:active { transform: translateY(0) scale(.97); }
.toggle-button:disabled { cursor: progress; }
.toggle-button:focus-visible, .portfolio-link:focus-visible { outline: 2px solid #ddd4c2; outline-offset: 5px; }
.viewport-notice {
  width: min(360px, calc(100vw - 36px));
  max-height: calc(100svh - 36px);
  padding: 30px 28px 26px;
  overflow: auto;
  border: 1px solid #45494a;
  border-radius: 18px;
  background: #111417;
  color: #eeeae3;
  box-shadow: 0 24px 80px #000a;
}
.viewport-notice::backdrop { background: #000d; }
.viewport-notice h2 {
  margin: 0 0 12px;
  font-family: "La Belle Aurore", "Bradley Hand", cursive;
  font-size: 33px;
  font-weight: 400;
  line-height: 1.1;
}
.viewport-notice p { margin: 0 0 26px; color: #bcbab4; font-size: 14px; line-height: 1.55; }
.viewport-notice form { margin: 0; }
.viewport-notice button {
  width: 100%;
  min-height: 46px;
  border: 1px solid #696d6d;
  border-radius: 999px;
  background: #1c2023;
  color: #f5f1e8;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms, transform 200ms;
}
.viewport-notice button:hover { background: #292f32; border-color: #aaa9a3; }
.viewport-notice button:active { transform: scale(.98); }
.viewport-notice button:focus-visible { outline: 2px solid #ddd4c2; outline-offset: 4px; }
@media (max-width: 600px) {
  .masthead-title { font-size: clamp(23px, 6.7vw, 28px); }
  .volume { font-size: 19px; }
  .toggle-button { width: 154px; font-size: 10px; }
  .book-shadow { top: 73%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}