/* Journal: independent layout, shared footer and theme assets. */
html {
  background: #101113;
  scroll-behavior: smooth;
}
body.journal-page {
  margin: 0;
  background: #101113;
  color: #f5f2eb;
  font-family: Arial, sans-serif;
  --paper: #f1e9d5;
  --ink: #292a23;
  --line: #ffffff35;
  --muted: #b8bab7;
}
body.journal-page.warm {
  background: #eeeae2;
  color: #22251f;
  --line: #56534940;
  --muted: #5e6258;
}
body.journal-page:before,
body.journal-page:after {
  display: none;
}
.journal-page * {
  box-sizing: border-box;
}
.journal-page [hidden] {
  display: none !important;
}
.journal-shell {
  max-width: 1260px;
  margin: auto;
  padding: 28px 32px 0;
}
.journal-page a {
  color: inherit;
  text-decoration: none;
}
.journal-page button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.journal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  letter-spacing: 0.05em;
}
.journal-nav button,
.book-controls button,
#pauseRail {
  border: 1px solid var(--line);
  background: #88888812;
  border-radius: 99px;
  padding: 12px 18px;
}
.journal-kicker {
  font: 11px/1.6 monospace;
  letter-spacing: 0.2em;
}
.book-section {
  text-align: center;
  padding: 60px 0 40px;
}
.book-section h1,
.category-section h2 {
  font-size: clamp(38px, 5.8vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.055em;
  margin: 16px 0;
}
.journal-deck,
.section-heading p,
.category-section > p:not(.journal-kicker) {
  color: var(--muted);
  line-height: 1.6;
}
.book-stage {
  perspective: 1600px;
}
.book {
  width: min(900px, 100%);
  min-height: 430px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: auto;
  isolation: isolate;
  touch-action: pan-y;
  filter: drop-shadow(0 24px 20px #0004);
}
.book-cover {
  position: absolute;
  inset: 10px -15px -12px;
  background: #44624d;
  border-radius: 18px 35px 25px 18px;
  z-index: -1;
  box-shadow:
    0 4px 0 #bcb39c,
    0 8px 0 #d5cdb9,
    0 12px 0 #344635;
}
.book-leaf {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  min-width: 0;
}
.book-photo {
  border-radius: 24px 5px 5px 24px;
  transform: rotate(-1.2deg);
  transform-origin: right center;
  text-align: left;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.book-photo img {
  width: 100%;
  height: 290px;
  object-fit: cover;
  flex: 1;
  min-height: 0;
  border-radius: 4px;
  filter: saturate(0.85);
}
.book-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 86%, #30271530);
  pointer-events: none;
}
.photo-note {
  color: var(--ink);
  font:
    italic 22px Georgia,
    serif;
  margin: 16px 0 2px;
}
.book-copy {
  padding: 40px 34px 26px;
  text-align: left;
  border-radius: 4px 26px 26px 4px;
  background: linear-gradient(
    90deg,
    #bfb6a0 0%,
    #f1e9d5 5%,
    #faf4e4 90%,
    #ded5c0
  );
  display: flex;
  flex-direction: column;
  transform: rotate(1deg);
  transform-origin: left center;
}
.book-copy h2 {
  font:
    700 clamp(26px, 3.2vw, 43px) / 1.05 Georgia,
    serif;
  letter-spacing: -0.04em;
  margin: 25px 0 18px;
}
.book-copy p {
  font:
    16px/1.7 Georgia,
    serif;
}
.book-copy .read-link {
  margin-top: auto;
  font-size: 13px;
  border-top: 1px solid #26282335;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
}
.book-copy small {
  font: 10px monospace;
  letter-spacing: 0.12em;
}
.book.turn-forward .book-copy {
  animation: page-turn 0.48s ease-in-out;
}
.book.turn-back .book-photo {
  animation: page-back 0.48s ease-in-out;
}
@keyframes page-turn {
  50% {
    transform: rotateY(-65deg);
    filter: brightness(0.85);
  }
}
@keyframes page-back {
  50% {
    transform: rotateY(65deg);
    filter: brightness(0.85);
  }
}
.book-controls {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  font: 12px monospace;
}
.book-instruction {
  color: var(--muted);
  font-size: 11px;
  margin-top: 16px;
}
.trending-section {
  margin: 80px 0 120px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
}
.section-heading h2 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.045em;
  margin: 12px 0;
}
.section-heading p {
  font-size: 13px;
}
.trending-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 40px 12px 45px;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.trending-rail::-webkit-scrollbar {
  display: none;
}
.trending-card {
  flex: 0 0 255px;
  aspect-ratio: 1;
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  transform: rotate(var(--tilt));
  box-shadow: 0 14px 24px #0002;
  background: #263b3f;
}
.trending-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trending-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 20%, #000d);
}
.trending-card div {
  position: absolute;
  bottom: 23px;
  left: 20px;
  right: 20px;
  z-index: 1;
  color: white;
}
.trending-card small {
  font: 10px monospace;
  letter-spacing: 0.1em;
}
.trending-card h3 {
  font-size: 23px;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 10px 0 0;
}
.category-section {
  text-align: center;
  margin-bottom: 100px;
}
.phone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 35px 26px;
  padding: 45px 10px 0;
}
.category-phone {
  text-align: left;
  min-width: 0;
  border: 5px solid #292c30;
  border-radius: 44px;
  padding: 15px 15px 20px;
  background: #12171c;
  color: #fff;
  box-shadow: 0 16px 30px #0003;
  position: relative;
  overflow: hidden;
  transform: translateY(var(--offset, 0px));
}
.category-phone:nth-child(3n + 2) {
  --offset: 25px;
}
.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 9px monospace;
  height: 26px;
  padding: 0 8px;
}
.dynamic-island {
  width: 77px;
  height: 23px;
  background: #000;
  border-radius: 22px;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}
.phone-heading {
  font-size: 22px;
  letter-spacing: -0.04em;
  margin: 25px 4px 18px;
}
.phone-feature {
  display: block;
  position: relative;
  height: 225px;
  border-radius: 24px;
  overflow: hidden;
  background: #263337;
}
.phone-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-feature span {
  position: absolute;
  inset: auto 0 0;
  padding: 50px 16px 16px;
  background: linear-gradient(transparent, #000e);
  font-size: 23px;
  line-height: 1.05;
  font-weight: bold;
}
.phone-links {
  padding: 10px 4px;
}
.phone-links a {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  padding: 13px 0;
  border-bottom: 1px solid #ffffff25;
}
.phone-home {
  width: 36%;
  height: 4px;
  background: #ddd;
  border-radius: 10px;
  margin: 12px auto 0;
}
.journal-page .contact-footer {
  margin-top: 70px;
}
.journal-page #fullArticle {
  max-width: 780px;
  margin: 60px auto 100px;
}
.article-back {
  display: inline-block;
  font-size: 13px;
  margin-bottom: 30px;
}
.journal-page #fullArticle h1 {
  font-size: clamp(36px, 6vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.article-meta {
  font: 11px/1.7 monospace;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.article-hero {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 24px;
  margin: 25px 0;
}
.article-text {
  max-width: 660px;
  margin: auto;
}
.article-text h2 {
  font-size: 25px;
  letter-spacing: -0.025em;
  margin-top: 38px;
}
.article-text p {
  font-size: 18px;
  line-height: 1.9;
  color: inherit;
}
.article-sources {
  border-top: 1px solid var(--line);
  margin-top: 36px;
  padding-top: 20px;
  font-size: 13px;
  line-height: 1.7;
}
.article-sources a {
  text-decoration: underline;
  display: block;
  overflow-wrap: anywhere;
}
#journalInfo {
  width: min(520px, calc(100% - 40px));
  border: 1px solid #777;
  border-radius: 28px;
  padding: 35px;
  background: #202226eb;
  color: #fff;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.warm #journalInfo {
  background: #eeeae2eb;
  color: #222;
}
#journalInfo::backdrop {
  background: #0004;
}
#closeInfo {
  float: right;
  background: transparent;
  border: 0;
  font-size: 26px;
}
#journalInfo p {
  line-height: 1.8;
}
.journal-page :focus-visible {
  outline: 2px solid #b5ce79;
  outline-offset: 5px;
}
@media (max-width: 850px) {
  .phone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .category-phone:nth-child(n) {
    --offset: 0px;
  }
  .book-copy {
    padding: 28px 24px;
  }
  .book-photo {
    padding: 16px;
  }
  .book-photo img {
    height: 270px;
  }
}
@media (max-width: 550px) {
  .journal-shell {
    padding: 20px 18px 0;
  }
  .book-section {
    padding-top: 38px;
  }
  .book-stage {
    padding: 30px 5px 20px;
  }
  .book {
    min-height: 0;
    grid-template-columns: 40% 60%;
  }
  .book-photo {
    padding: 9px;
  }
  .book-photo img {
    height: 260px;
  }
  .photo-note {
    color: var(--ink);
    font-size: 15px;
  }
  .book-copy {
    padding: 22px 15px 18px;
  }
  .book-copy h2 {
    font-size: 25px;
    margin: 15px 0;
  }
  .book-copy p {
    font-size: 13px;
    line-height: 1.55;
  }
  .book-copy small {
    font-size: 8px;
  }
  .book-copy .read-link {
    font-size: 11px;
    padding-top: 12px;
  }
  .book-cover {
    inset: 8px -7px -7px;
  }
  .book-instruction {
    font-size: 10px;
  }
  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .trending-section {
    margin: 55px 0 60px;
  }
  .trending-card {
    flex-basis: 215px;
  }
  .phone-grid {
    gap: 22px 12px;
    padding: 25px 0;
  }
  .category-phone {
    border-width: 3px;
    border-radius: 27px;
    padding: 10px 9px 14px;
  }
  .phone-status {
    font-size: 7px;
    padding: 0 2px;
  }
  .dynamic-island {
    width: 52px;
    height: 16px;
    top: 14px;
  }
  .phone-heading {
    font-size: 18px;
    margin: 20px 2px 12px;
  }
  .phone-feature {
    height: 175px;
    border-radius: 16px;
  }
  .phone-feature span {
    font-size: 18px;
    padding: 35px 10px 12px;
  }
  .phone-links a {
    font-size: 12px;
  }
  .article-text p {
    font-size: 17px;
  }
  .journal-page .contact-footer {
    margin-top: 35px;
  }
  .journal-nav {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .book.turn-forward .book-copy,
  .book.turn-back .book-photo {
    animation: none;
  }
}

/* Preserve footer contrast independently of homepage text tokens. */
.journal-page .wallet-pocket {
  color: #f5f2eb;
}
.journal-page .footer-bottom {
  color: var(--muted);
}

/* Each snap stop is an entire double-page spread. The paper bows at the spine. */
.book-stage{padding:12px 0 0;background:linear-gradient(160deg,#313a55,#242d44);border-radius:24px}
.spread-rail{--margin:10%;position:relative;display:flex;align-items:stretch;gap:12px;padding:32px var(--margin) 42px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.spread-rail::-webkit-scrollbar{display:none}
.spread-rail .spread{flex:0 0 100%;width:100%;margin:0;touch-action:auto;scroll-snap-align:center;min-height:0;filter:drop-shadow(0 12px 7px #0005);grid-template-columns:1fr 1fr}
.spread .book-cover{inset:4px -2px -3px;border-radius:14px}
.spread .book-photo{transform:none;border-radius:12px 2px 2px 12px;background:linear-gradient(98deg,#faf4e5 65%,#d5cab5);padding:clamp(9px,2vw,24px)}
.spread .book-photo img{height:clamp(235px,29vw,365px);object-position:50% 32%;filter:none;flex:auto}
.spread .book-copy{transform:none;border-radius:2px 12px 12px 2px;border-top:5px solid var(--edition)}
.spread .book-copy small{color:#524a3b}.spread .book-copy p{color:#383428}
@supports(animation-timeline:view(inline)){
 @media(prefers-reduced-motion:no-preference){
  .spread{view-timeline-name:--edition-pass;view-timeline-axis:inline}
  .spread .book-leaf{animation:leaf-bend linear both;animation-timeline:--edition-pass}
  @keyframes leaf-bend{0%{transform:perspective(900px) rotateY(-18deg) skewY(1deg)}45%,55%{transform:none}100%{transform:perspective(900px) rotateY(18deg) skewY(-1deg)}}
 }
}
#bookReader{width:min(730px,calc(100% - 32px));max-height:86vh;max-height:86dvh;box-sizing:border-box;padding:0 clamp(18px,4vw,38px) 28px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:26px;color:inherit;background:linear-gradient(125deg,#24262bdc,#16171bea);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px);box-shadow:0 20px 60px #0004}
.warm #bookReader{background:linear-gradient(125deg,#f9f5edec,#e8e4dbe8)}
#bookReader::backdrop{background:#1113}
.reader-tools{position:sticky;top:0;display:flex;justify-content:flex-end;padding:10px 0;z-index:1;pointer-events:none}
.reader-tools button{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#303139;color:white;font-size:24px}
#popupArticle h1{letter-spacing:-.045em;line-height:1.05;font-size:clamp(30px,5vw,50px)}
#popupArticle .article-hero{width:100%;height:auto;max-height:460px;object-fit:cover}
@media(max-width:550px){.spread-rail{--margin:5%;gap:6px;padding-block:22px 28px}.spread .book-copy{padding:16px 10px}.spread .book-copy h2{font-size:clamp(20px,5vw,25px)}.spread .book-photo img{height:210px}.spread .photo-note{font-size:13px}}

.spread-rail.dragging{scroll-snap-type:none;user-select:none;cursor:grabbing}