/* Notes and post layouts. */

.notebook-led {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 5px rgba(34, 212, 217, .11), 0 0 15px rgba(34, 212, 217, .8);
}

.notebook-doorway {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 23px;
  margin-top: 24px;
  padding: 25px 29px;
  border: 1px solid rgba(188, 232, 229, .27);
  border-radius: 10px;
  background: rgba(171, 226, 225, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}

.notebook-doorway > .notebook-led { align-self: start; margin-top: 10px; }
.notebook-doorway p { margin: 0 0 7px; color: #9bcdd0; font: 700 .68rem/1.4 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.notebook-doorway h3 { margin: 0 0 5px; color: #edf4ef; font: 700 clamp(1.1rem, 1.8vw, 1.45rem)/1.2 var(--font-mono); letter-spacing: -.02em; }
.notebook-doorway div > span { color: rgba(237, 244, 239, .66); font-size: .83rem; line-height: 1.5; }
.notebook-doorway a { display: inline-flex; align-items: center; gap: 20px; padding: 10px 0 5px; border-bottom: 1px solid rgba(155, 205, 208, .65); color: #c5e9e7; font-size: .83rem; font-weight: 700; white-space: nowrap; }
.notebook-doorway a:hover { border-color: #fff; color: #fff; }

.notebook-eyebrow,
.notebook-breadcrumb,
.notebook-section-heading,
.note-byline,
.note-rail,
.note-quote-top,
.note-end > p {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.notes-page,
.note-page { background: #e9f2ed; }

.notebook-shell { width: min(calc(100% - 48px), var(--page-width)); margin-inline: auto; }

.notebook-hero,
.note-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(circle at 77% 47%, rgba(62, 190, 194, .28), transparent 32%), radial-gradient(circle at 18% 84%, rgba(255, 255, 255, .88), transparent 37%), linear-gradient(115deg, #f8f7ef, #e1f1ee 68%, #d1e8e7);
}

.notebook-hero::before,
.note-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(53, 134, 139, .06) 1px, transparent 1px), linear-gradient(rgba(53, 134, 139, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent 15%, #000);
  content: "";
}

.notebook-hero .notebook-shell,
.note-hero .notebook-shell { padding-top: 158px; }
.notebook-hero .notebook-shell { padding-bottom: 72px; }

.notebook-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; color: #4c6869; font-size: .68rem; }
.notebook-breadcrumb a { border-bottom: 1px solid transparent; }
.notebook-breadcrumb a:hover { border-color: currentColor; color: #1e646a; }
.notebook-breadcrumb > span:last-child { color: #1f6e73; }

.notebook-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); align-items: center; gap: clamp(30px, 5vw, 70px); margin-top: 32px; }
.notebook-eyebrow { display: flex; align-items: center; gap: 13px; margin: 0; color: #286e73; font-size: .72rem; }
.notebook-hero h1,
.note-hero h1 { max-width: 920px; margin: 26px 0 22px; font-family: var(--font-mono); font-size: clamp(3.15rem, 6.2vw, 6.6rem); line-height: .98; letter-spacing: -.055em; }
.notebook-hero h1 { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.notebook-hero h1 em,
.note-hero h1 em { color: #2a8588; font-style: normal; }
.notebook-hero-copy > p:not(.notebook-eyebrow) { max-width: 570px; margin: 0; color: #425c5e; font-size: clamp(1.05rem, 1.65vw, 1.23rem); line-height: 1.7; }
.notebook-jump { display: inline-flex; align-items: center; gap: 28px; margin-top: 33px; padding-bottom: 7px; border-bottom: 1px solid #3d9294; color: #16585d; font-size: .86rem; font-weight: 700; }
.notebook-jump:hover { color: #123d42; border-color: #123d42; }

.notebook-hero-object {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  max-width: 300px;
  place-items: center;
  margin: auto;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: radial-gradient(circle at 37% 28%, rgba(255, 255, 255, .87), rgba(180, 232, 227, .49) 38%, rgba(50, 125, 130, .14) 72%, rgba(255, 255, 255, .71));
  box-shadow: inset 15px 20px 35px rgba(255, 255, 255, .72), inset -20px -30px 50px rgba(28, 125, 133, .13), 0 30px 70px rgba(28, 99, 105, .16), 0 0 0 17px rgba(255, 255, 255, .2);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.notebook-hero-object img { position: relative; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(6, 55, 61, .14)); animation: notebook-float 8s ease-in-out infinite; }
.notebook-orbit { position: absolute; inset: 10%; border: 1px solid rgba(35, 124, 131, .28); border-radius: 50%; }
.notebook-orbit-inner { inset: 23%; border-color: rgba(255, 255, 255, .7); }
.notebook-orbit-point { position: absolute; top: 11%; right: 27%; width: 9px; height: 9px; border-radius: 50%; background: #fafff7; box-shadow: 0 0 0 4px rgba(34, 212, 217, .37), 0 0 22px #3edee0; }
.notebook-object-label { position: absolute; bottom: -27px; right: 0; color: #5b7b7a; font: 700 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

.notebook-content { position: relative; padding: 78px 0 105px; background: linear-gradient(160deg, #f8f6f0, #e9f1ee 55%, #eef6f1); }
.notebook-section-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; color: #285e63; font-size: .68rem; }
.notebook-section-heading p { margin: 0; }
.notebook-section-heading p:last-child { color: #627777; }
.notebook-section-heading span { height: 1px; background: linear-gradient(90deg, #8fb8ba, rgba(143, 184, 186, .27)); }
.notebook-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.notebook-entry { display: flex; flex-direction: column; min-width: 0; min-height: 380px; padding: clamp(25px, 3vw, 38px); border: 1px solid rgba(137, 186, 185, .42); border-radius: 14px; background: linear-gradient(145deg, rgba(255, 255, 255, .93), rgba(235, 249, 245, .78)); box-shadow: 0 15px 38px rgba(29, 89, 94, .075), inset 0 1px 0 white; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.notebook-entry:hover { border-color: rgba(48, 144, 149, .6); box-shadow: 0 20px 44px rgba(29, 89, 94, .11), inset 0 1px 0 white; transform: translateY(-3px); }
.notebook-entry:focus-within { border-color: #308f95; }
.notebook-entry-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid rgba(102, 163, 163, .28); color: #417276; font: 700 .66rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.notebook-entry-top span:last-child { color: #6b8585; white-space: nowrap; }
.notebook-entry-mark { align-self: flex-start; margin-top: 25px; padding: 8px 10px; border: 1px solid rgba(73, 147, 149, .22); border-radius: 5px; background: rgba(221, 241, 236, .7); color: #2b7479; font: 700 .73rem/1.35 var(--font-mono); }
.notebook-entry-type { margin: 26px 0 8px; color: #38787c; font: 700 .65rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.notebook-entry h2 { max-width: 520px; margin: 0 0 12px; color: #22383b; font: 700 clamp(1.55rem, 2.4vw, 2.2rem)/1.16 var(--font-mono); letter-spacing: -.045em; }
.notebook-entry h2 a:hover { color: #1a777e; }
.notebook-entry-excerpt { max-width: 510px; margin: 0 0 28px; color: #4c6365; font-size: .96rem; line-height: 1.63; }
.notebook-read-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 23px; margin-top: auto; padding-bottom: 5px; border-bottom: 1px solid #4f9b9c; color: #1d676d; font-size: .85rem; font-weight: 700; }
.notebook-read-link:hover { color: #123e44; border-color: #123e44; }
.notebook-related-link { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 23px; padding: 20px 3px 0; border-top: 1px solid rgba(87, 151, 153, .24); }
.notebook-related-link > span { color: #2e7176; font: 700 .63rem/1.4 var(--font-mono); letter-spacing: .09em; white-space: nowrap; }
.notebook-related-link p { flex: 1 1 420px; margin: 0; color: #536c6e; font-size: .84rem; line-height: 1.55; }
.notebook-related-link a { padding-bottom: 3px; border-bottom: 1px solid #5e9fa0; color: #1d646a; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.notebook-related-link a:hover { color: #143e43; border-color: #143e43; }
.notebook-signoff { margin: 53px 0 0; color: #607777; font: 700 .7rem/1.6 var(--font-mono); letter-spacing: .06em; text-align: center; }
.notebook-signoff span { margin-right: 8px; color: #2a9fa2; }

.note-hero .notebook-shell { padding-bottom: 74px; }
.note-hero-content { max-width: 990px; padding: 56px 0 0; }
.note-hero h1 { margin-bottom: 27px; font-size: clamp(3rem, 6vw, 6.2rem); }
.note-deck { max-width: 750px; margin: 0; color: #425b5e; font-size: clamp(1.1rem, 1.9vw, 1.38rem); line-height: 1.65; }
.note-byline { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; color: #517478; font-size: .68rem; }
.note-byline span:nth-child(even) { color: #278f94; }
.note-reading-layout { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 770px); gap: clamp(40px, 6vw, 100px); padding-top: 75px; padding-bottom: 120px; }
.note-rail { position: sticky; top: 150px; align-self: start; padding-top: 6px; color: #667e7f; font-size: .67rem; }
.note-rail p { margin: 0 0 19px; color: #307278; }
.note-rail nav { display: grid; gap: 8px; padding-left: 15px; border-left: 1px solid #b3cfcd; }
.note-rail a { padding: 7px 0; color: #536d70; line-height: 1.5; text-transform: none; letter-spacing: .015em; }
.note-rail a:hover { color: #14666d; }
.note-rail-mark { display: block; margin-top: 45px; color: #8da8a9; }

.note-prose { min-width: 0; color: #273c3e; font-size: 1.08rem; line-height: 1.85; }
.note-prose p { margin: 0 0 1.45em; }
.note-intro { font-size: clamp(1.28rem, 2vw, 1.52rem); font-weight: 600; line-height: 1.57; letter-spacing: -.018em; }
.note-prose h2 { margin: 2.3em 0 .7em; color: #1f3538; font-size: clamp(1.75rem, 2.7vw, 2.4rem); line-height: 1.2; letter-spacing: -.035em; scroll-margin-top: 130px; }
.note-quote { margin: 38px 0; padding: 0; overflow: hidden; border: 1px solid rgba(149, 206, 206, .38); border-radius: 11px; background: linear-gradient(145deg, #1a3036, #24434a); box-shadow: 0 20px 38px rgba(21, 69, 76, .15); color: #e5f4ef; }
.note-quote-top { display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 0 20px; border-bottom: 1px solid rgba(181, 231, 229, .14); color: #b4d8d8; font-size: .67rem; }
.note-quote-top span:last-child { margin-left: auto; color: #8ec5c7; }
.note-quote blockquote { margin: 0; padding: 29px 31px 18px; font: 500 clamp(1.15rem, 2vw, 1.5rem)/1.65 var(--font-mono); }
.note-quote figcaption { padding: 0 31px 27px; color: #a7c4c3; font-size: .77rem; }
.note-flow { display: flex; align-items: stretch; gap: 11px; margin: 32px 0; padding: 21px; border: 1px solid rgba(72, 140, 145, .26); border-radius: 10px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff; }
.note-flow div { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 4px; padding: 16px; border-radius: 6px; background: linear-gradient(145deg, #f9fffa, #e5f4f1); }
.note-flow span { color: #27858b; font: 700 .66rem var(--font-mono); }
.note-flow strong { font: 700 1rem var(--font-mono); }
.note-flow small { color: #607b7d; font-size: .7rem; line-height: 1.4; }
.note-flow i { align-self: center; color: #288b90; font: 700 1.2rem var(--font-mono); font-style: normal; }
.note-end { margin-top: 70px; padding-top: 25px; border-top: 1px solid rgba(72, 140, 145, .28); }
.note-end > p { margin: 0 0 22px; color: #6a8484; font-size: .68rem; }
.note-end > p span { color: #269da3; }
.note-end > div { display: flex; flex-wrap: wrap; gap: 14px 35px; }
.note-end a { padding-bottom: 4px; border-bottom: 1px solid #64a8aa; color: #1b656c; font-size: .87rem; font-weight: 700; }
.note-end a:hover { color: #113c43; border-color: #113c43; }

@keyframes notebook-float { 50% { transform: translateY(-8px) rotate(2deg); } }

@media (max-width: 900px) {
  .notebook-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, .6fr); gap: 25px; }
  .notebook-hero-object { width: min(100%, 310px); }
  .note-reading-layout { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .note-rail { position: static; padding: 0 0 22px; border-bottom: 1px solid #b8d0cf; }
  .note-rail nav { display: flex; flex-wrap: wrap; gap: 7px 22px; padding: 0; border: 0; }
  .note-rail-mark { display: none; }
}

@media (max-width: 780px) {
  .notebook-doorway { grid-template-columns: auto minmax(0, 1fr); gap: 13px 18px; }
  .notebook-doorway a { grid-column: 2; justify-self: start; }
  .notebook-hero .notebook-shell,
  .note-hero .notebook-shell { padding-top: 125px; }
  .notebook-hero-grid { grid-template-columns: 1fr; }
  .notebook-hero-object { width: min(62vw, 250px); margin: 28px auto 0; }
  .notebook-entry-grid { grid-template-columns: 1fr; }
  .notebook-entry { min-height: 0; }
  .note-hero-content { padding-top: 45px; }
  .note-reading-layout { padding-top: 55px; padding-bottom: 80px; }
}

@media (max-width: 550px) {
  .notebook-shell { width: min(calc(100% - 36px), var(--page-width)); }
  .notebook-hero .notebook-shell { padding-bottom: 65px; }
  .notebook-hero h1,
  .note-hero h1 { font-size: clamp(2.75rem, 12vw, 4.2rem); }
  .notebook-hero h1 { font-size: clamp(2.55rem, 10vw, 3.6rem); }
  .notebook-hero-object { width: min(60vw, 230px); }
  .notebook-section-heading { grid-template-columns: 1fr; gap: 7px; }
  .notebook-section-heading span { display: none; }
  .notebook-section-heading p:last-child { font-size: .63rem; }
  .notebook-doorway { padding: 22px 19px; }
  .notebook-entry { padding: 23px; }
  .note-byline { gap: 8px; }
  .note-flow { flex-direction: column; }
  .note-flow i { transform: rotate(90deg); }
  .note-prose { font-size: 1rem; }
  .note-quote blockquote { padding: 25px 23px 13px; }
  .note-quote figcaption { padding: 0 23px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .notebook-hero-object img { animation: none; }
  .notebook-entry { transition: none; }
  .notebook-entry:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .notebook-doorway { background: #223b42; }
  .notebook-hero-object { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .notebook-entry { background: #f8faf5; }
}