html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  background: #97867d;
}

@font-face { font-family: 'JetBrains Mono'; src: url('vendor/jetbrains-mono.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Azeret Mono'; src: url('vendor/azeret-mono.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/*
* {
  cursor: url('../assets/Precision\ Select\ G191.cur'), auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}*/

.wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  container-type: size;
}

.wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  opacity: 0.17;
  background-image: url('../generated/images/ca2dd0580f72ab855aa8-200.webp');
  background-size: 200px 200px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/*
a, button, .cardicon2, .tuck-btn, .mute-btn {
  cursor: url('../assets/Normal\ Select\ G191.cur'), pointer;
}

p, h1, h2, h3, .content {
  cursor: url('../assets/Text\ Select\ G191.cur'), text;
}*/

.material {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  background-image: url('../generated/images/7d10feebb017b16889cf-1200.webp');
  background-size: auto 900px;
  background-position: top left;
  background-repeat: repeat;
  z-index: 0;
}

/* ========================
   TWO CARD PANELS
======================== */

.card-panel {
  position: absolute;
  z-index: 10;
  transition: left 0.35s ease, top 0.35s ease;
  user-select: none;
  cursor: grab;
}

.card-panel.dragging {
  transition: none;
  cursor: grabbing;
}

#card-folders-panel {
  top: 5cqh;
  left: 2cqw;
}

#card-files-panel {
  top: 6.4cqh;   /* starting position — adjust to taste */
  left: 26.5cqw;  /* starting position — adjust to taste */
}

.tuck-btn {
  position: absolute;
  z-index: 11;
  pointer-events: visibleFill;
  transition: width 0.15s ease;
  transform: rotate(5deg);
}

#card-folders-panel .tuck-btn {
  width: 4.8cqw; /* bigger */
  right: -1.4cqw;
  top: 1.2cqw;
  filter: drop-shadow(0px 5.5px 2.6px rgba(0,0,0,0.5));
}@media (hover: hover) {

#card-folders-panel .tuck-btn:hover {
  width: 5cqw;
}}

/* ========================
   FOLDER CARD
======================== */

/* Source artwork is 1494 × 2070; rules repeat every 69 source pixels.
   Width chooses one uniform scale. Height only crops that fixed surface. */
.card {
  --paper-width: 42.8vw;
  --paper-unit: calc(var(--paper-width) / 1494);
  --rule-step: calc(69 * var(--paper-unit));
  --nav-row: var(--rule-step);
  --paper-limit: min(calc(2070 * var(--paper-unit)), 72svh);
  position: relative;
  width: var(--paper-width);
  background-image: url('../generated/images/e056be4273fd5ced7b43-1200.webp');
  background-size: var(--paper-width) auto;
  background-repeat: no-repeat;
  filter: drop-shadow(4px 4px 7px rgba(0,0,0,0.45));
}
.card-folder-links {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: var(--paper-limit);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  padding: calc(125 * var(--paper-unit)) calc(50 * var(--paper-unit)) calc(55 * var(--paper-unit)) calc(167 * var(--paper-unit));
  margin: 0;
  outline: none;
}
.card-folder-links > *, .sub-links > * { flex-shrink: 0; }

/* header label inside folder card */
.card-section-header {
  text-decoration: none;
  color: #2d2d2d;
  font-family: 'Noto Serif', serif;
  font-weight: 400;
  font-size: calc(73 * var(--paper-unit));
  opacity: 0.715;
  line-height: var(--rule-step);
  outline: none;
  letter-spacing: -0.045em;
  filter: blur(calc(1.285 * var(--paper-unit))) drop-shadow(0 0 calc(5.82 * var(--paper-unit)) rgba(0,0,0,.25));
  mix-blend-mode: multiply;
}

.card a {
  box-sizing: border-box;
  height: var(--nav-row);
  padding-top: calc(var(--nav-row) - var(--rule-step));
  white-space: nowrap;
  transition: all 0.18s ease;
  text-decoration: none;
  color: #2d2d2d;
  font-family: 'Noto Serif', serif;
  font-weight: 300;
  font-size: max(1rem, calc(64 * var(--paper-unit)));
  opacity: 0.715;
  line-height: var(--rule-step);
  outline: none;
  letter-spacing: -0.045em;
  filter: blur(calc(1.285 * var(--paper-unit))) drop-shadow(0 0 calc(5.82 * var(--paper-unit)) rgba(0,0,0,.25));
  mix-blend-mode: multiply;
  display: block;
}@media (hover: hover) {

.card a:hover {
  color: #5c3286;
  /* Hover keeps the printed row geometry. */
  text-decoration: underline;
}}

.card a.active-link {
  color: #566acf;
  opacity: 1;
  text-decoration: underline;
}

.card a.active-folder-link {
  color: #566acf;
  opacity: 1;
}

.card a.unread {
  color: #832e23;
}

.card a.unread::after {
  content: ' •';
  color: #832e23;
  font-size: .7em;
}

/*4e108d purple

*/

.sub-links {
  display: flex;
  flex-direction: column;
  padding-left: calc(96 * var(--paper-unit));
}

.folder-link.has-children::before {
  content: '';
  width: 0; height: 0;
  border-block: .25em solid transparent;
  border-left: .4em solid currentColor;
  margin-right: .15em;
  vertical-align: .05em;
  display: inline-block;
  transition: transform 0.5s ease;
}

.folder-link.has-children.open::before {
  transform: rotate(90deg);
}

.folder-arrow-indicator::before {
  content: '' !important;
}

.folder-arrow-indicator {
  pointer-events: none !important;
  text-decoration: none !important;
  cursor: default !important;
  opacity: 0.45;
}



.folder-line-path {
  fill: none;
  stroke: #4a4440;
  stroke-width: 1.5px;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  opacity: 0.45;
  stroke-dashoffset: 1000;
  animation: draw-line 0.6s ease forwards;
}

#folder-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
  overflow: visible;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

.cardicon2 {
  transition: width 0.15s ease;
  position: absolute;
  top: calc(-89.64 * var(--paper-unit));
  left: calc(59.76 * var(--paper-unit));
  width: calc(239.04 * var(--paper-unit));
  opacity: 0.94;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25));
  pointer-events: visibleFill;
  z-index: 5;
  transform: rotate(-28deg);
}@media (hover: hover) {

.cardicon2:hover {
  width: calc(253.98 * var(--paper-unit));
}}

/* ========================
   RECEIPT — files panel
======================== */

/* Receipt source is 936 × 2429. Crop its length; never squeeze the texture. */
.receipt {
  --receipt-width: 24vw;
  --receipt-unit: calc(var(--receipt-width) / 936);
  --receipt-limit: min(calc(2429 * var(--receipt-unit)), 70svh);
  width: var(--receipt-width);
  background-image: url('../generated/images/e89eebd357642bb09397-936.webp');
  background-size: var(--receipt-width) auto;
  background-repeat: no-repeat;
  background-position: top left;
  filter: drop-shadow(6px 9px 5.5px rgba(0,0,0,0.23));
}
.card-file-links {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: var(--receipt-limit);
  min-height: calc(395 * var(--receipt-unit));
  padding: calc(117 * var(--receipt-unit)) calc(98 * var(--receipt-unit)) calc(78 * var(--receipt-unit));
  margin: 0;
  outline: none;
}
.card-file-links > :not(.receipt-entries) { flex-shrink: 0; }
.receipt-entries { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }

/* ENTRIES: header at top of receipt */
.receipt-header {
  font-family: 'Azeret Mono', monospace;
  font-weight: 300;
  font-size: calc(58.5 * var(--receipt-unit));
  color: #434040;
  opacity: 0.815;
  text-shadow: 0 0 0.5px rgba(93, 74, 150, 0.4);
  letter-spacing: -0.07em;
  margin-bottom: calc(-11.7 * var(--receipt-unit));
  transform: rotate(-0.4deg);
  filter: blur(0.07px) contrast(106%);
}

.receipt-divider {
  font-family: 'Azeret Mono', monospace;
  font-weight: 300;
  font-size: calc(37.05 * var(--receipt-unit));
  color: #434040;
  opacity: 0.815;
  text-shadow: 0 0 0.5px rgba(93, 74, 150, 0.4);
  letter-spacing: -0.07em;
  transform: rotate(-0.4deg);
  filter: blur(0.07px) contrast(106%);
  margin-top: calc(7.8 * var(--receipt-unit));
  margin-bottom: 0;
  user-select: none;
}

.receipt-total {
  margin-top: 0;
  transition: all 0.18s ease;
  text-decoration: none;
  color: #434040;
  font-family: 'Azeret Mono', monospace;
  font-weight: 400;
  font-size: calc(39 * var(--receipt-unit));
  opacity: 0.8;
  text-shadow: 0 0 0.5px rgba(93, 74, 150, 0.4);
  line-height: 1.08;
  outline: none;
  letter-spacing: -0.065em;
  mix-blend-mode: multiply;
  text-rendering: optimizeSpeed;
  display: block;
  transform: rotate(-0.8deg);
  filter: blur(0.07px) contrast(106%);
}

.card-file-links a {
  transition: all 0.18s ease;
  text-decoration: none;
  color: #434040;
  font-family: 'Azeret Mono', monospace;
  font-weight: 400;
  font-size: calc(39 * var(--receipt-unit));
  opacity: 0.8;
  text-shadow: 0 0 0.5px rgba(93, 74, 150, 0.4);
  line-height: 1.08;
  outline: none;
  letter-spacing: -0.065em;
  mix-blend-mode: multiply;
  text-rendering: optimizeSpeed;
  display: block;
  transform: rotate(-0.8deg);
  filter: blur(0.07px) contrast(106%);
}@media (hover: hover) {

.card-file-links a:hover {
  color: #512e74;
  opacity: 0.77;
}}

.card-file-links a.active-link {
  color: #213786;
  opacity: 0.77;
}

.card-file-links a.unread {
  color: #832e23;
}

.card-file-links a.unread::after {
  content: ' •';
  color: #832e23;
  font-size: 1cqw;
}

/* ========================
   CONTENT AREA
======================== */

.banner {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 3;
  pointer-events: none;
  border-bottom: 3.2px solid rgba(64, 56, 51, 1);
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.45));
}

.wip-sticker {
  display: none;
  position: absolute;
  width: 15cqw;
  top: 5cqh;
  left: 39.35cqw;
  z-index: 20;
  opacity: 0.96;
  pointer-events: none;
  filter: drop-shadow(2px 3px 10px rgba(0,0,0,0.7));
  transition: opacity 0.1s ease;
}

.doc-header {
  margin-bottom: 2cqw;
}

.doc-dates {
  font-size: 1.2cqw;
  opacity: 0.6;
  display: block;
  margin-bottom: 0.5cqw;
}

.doc-header h2 {
  margin: 0;
  font-size: 2.5cqw;
  line-height: 100%;
}

.content-text h1, .content-text h2, .content-text h3,
.content-text h4, .content-text h5, .content-text h6,
.doc-header h2 {
  font-family: 'Baskerville', serif;
}

.content-bg {
  min-height: 100%;
  border-radius: 3px;
  background: rgba(248, 246, 246, 0.95);
  padding: 2cqw 2cqw 1cqw 2cqw;
  margin: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  outline: 3.2px solid rgba(64, 56, 51, 1);
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-left: 7.7cqw;
  padding-top: 4cqw;
  padding-bottom: 4.1cqw;
  padding-right: 4.9cqw;
  font-size: 0.96cqw;
  line-height: 123.8%;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 410;
  color: #4a4440;
  z-index: 2;
  /* Ink effects belong to text, not a rasterized scrolling article layer. */
}

.content img {
  display: block;
  margin-top: 1.2cqw;
  margin-bottom: 0.1cqw;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
  opacity: 1;
  border-radius: 3px;
  border: 2.4px solid rgba(33, 33, 33, 0.74);
  filter: drop-shadow(4px 0px 15px rgba(0,0,0,0.14))
    drop-shadow(0px 0px 35px rgba(0,0,0,0.15));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}@media (hover: hover) {

.content img:hover {
  transform: scale(1.035);
}}

.multiply-wrapper {
  background: rgb(248, 246, 246);
  display: block;
  width: 100%;
  isolation: isolate;
}

.multiply-wrapper img {
  mix-blend-mode: multiply;
  width: 100%;
  height: auto;
}

.content p {
  margin-top: 0px;
  margin-bottom: 1.7cqh;
}

.content h3 {
  margin-bottom: 0.48cqw;
}

.content a {
  color: #ad5147;
}

.content .video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  margin: 1cqw auto;
  border-radius: 4px;
  border: 2.6px solid rgba(33, 33, 33, 0.88);
  filter: drop-shadow(4px 0px 23px rgba(0,0,0,0.35))
    drop-shadow(0px 0px 35px rgba(0,0,0,0.15));
}

.content .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1cqw;
}

.content .grid img {
  width: 100%;
  height: auto;
}

.content .grid em {
  display: block;
  text-align: center;
  font-size: 1.2cqw;
}

.content .float-right {
  float: right;
  width: 40%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5cqw;
  margin-left: 2cqw;
}

.content .float-right img {
  height: 24cqw;
  float: none;
  margin: 0;
}

.content .float-right p {
  display: contents;
}


.content-text {
  mix-blend-mode: multiply;
}

/* Single ink pass per text-bearing element: no parent/child blur accumulation. */
.content { --ink-blur: .007em; --ink-shadow: .20em; }
.content-text :is(h1,h2,h3,h4,h5,h6) {
  color: #4a4440;
  filter: blur(.003em) drop-shadow(0 0 .10em rgba(0,0,0,.22));
}
.content-text h1 { opacity: .97; }
.content-text h2 { opacity: .94; }
.content-text h3 { opacity: .90; }
.content-text :is(h4,h5,h6) { opacity: .88; }
.content-text p, .content-text li {
  color: #4a4440;
  opacity: .89;
  filter: blur(var(--ink-blur)) drop-shadow(0 0 var(--ink-shadow) rgba(0,0,0,.19));
}
.content-text li:has(p,ul,ol) { filter: none; opacity: 1; }
.content-text blockquote { color: #4a4440; }

.csv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.96cqw;
  color: #4a4440;
}

.csv-table th {
  text-align: left;
  padding: 0.3cqw 0.8cqw;
  border-bottom: 1.5px solid rgba(74, 68, 64, 0.3);
  opacity: 0.7;
}

.csv-table td {
  padding: 0.3cqw 0.8cqw;
}

.csv-table-wrapper {
  overflow-x: auto;
  width: 100%;
}

.mute-btn {
  position: absolute;
  bottom: 1.7cqh;
  left: 1cqw;
  width: 9cqw;
  z-index: 20;
  cursor: pointer;
  pointer-events: visibleFill;
  opacity: 0.94;
  transition: opacity 0.2s ease;
  filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.25));
}@media (hover: hover) {

.mute-btn:hover {
  opacity: 1;
  width: 9.07cqw;
}}

.mute-btn.muted {
  opacity: 0.6;
}

.html-embed {
  width: 100%;
  height: 80cqh;
  border: none;
  background: transparent;
}

.full-width-img {
  width: 100%;
  height: auto !important;
  max-height: none;
  object-fit: contain;
}

.top {
  top: -3.5px;
  left: 0;
  position: absolute;
  background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 100%);
  width: 100%;
  height: 3cqh;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: multiply;
}

.frame {
  position: absolute;
  bottom: -1.65cqw;
  right: 0;
  width: 100%;
  z-index: -10;
  pointer-events: none;
  filter: drop-shadow(7px -2px 5px rgba(0,0,0,0.3));
}

.lightbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#lightbox-img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  border: 22px solid rgb(255, 255, 255);
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.8));
  transform: scale(0.96);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.lightbox.active #lightbox-img {
  transform: scale(1);
}

.leftbg {
  position: relative;
  top: 0;
  left: 0;
  width: 44.1%;
  height: 100%;
  background-image: url('../generated/images/5e874c4921d9a4560390-1200.webp');
  /* The backing has identical vertical rows: anchor its edge to the illustration width. */
  background-size: 100% auto;
  background-position: right top;
  background-repeat: repeat-y;
  z-index: 5;
  filter: drop-shadow(5px 0px 23px rgba(0,0,0,0.3));
}

.leftbg img {
  position: absolute;
  bottom: 0;
  left: 3px;
  width: 94.7%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.next-page-btn {
  position: absolute;
  bottom: 0.2cqw;
  right: 5cqw;
  width: 10.3cqw;
  z-index: 11;
  pointer-events: auto;
  opacity: 1;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.25)) drop-shadow(7px -2px 5px rgba(0,0,0,0.3));
  transform: scaleX(-1) translateY(100%);
  transition: width 0.15s ease;
  cursor: pointer;
}@media (hover: hover) {

.next-page-btn:hover {
  width: 10.7cqw;
}}

.safari .content,
.safari .content-text h1, .safari .content-text h2, .safari .content-text h3,
.safari .content-text h4, .safari .content-text h5, .safari .content-text h6,
.safari .content-text p, .safari .content-text blockquote,
.safari .content-text ul, .safari .content-text ol,
.safari .card a {
  filter: none;
}

.compat-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.compat-warning.active {
  display: flex;
}

.compat-warning.visible {
  opacity: 1;
}

.compat-inner {
  position: relative;
  display: inline-block;
}

.compat-postit {
  display: block;
  width: auto;
  height: auto;
  max-width: 45vw;
  max-height: 80vh;
  object-fit: contain;
  filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.4));
}

.compat-ok {
  position: absolute;
  /* now % is relative to the image size, easier to line up */
  bottom: 17%;
  right: 24.8%;
  width: 43%;
  height: 27%;
  cursor: pointer;
}

.info-card {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.info-card.active {
  display: flex;
}

.info-card.visible {
  opacity: 1;
}

.info-card-img {
  width: auto;
  height: auto;
  max-width: 45vw;
  max-height: 80vh;
  object-fit: contain;
  filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.4));
  cursor: default;
}
/* Keep image aspect ratios when intrinsic dimensions are provided by the build. */
img { height: auto; }
.paper-icon { padding: 0; border: 0; background: none; cursor: pointer; }
.paper-icon img { display: block; width: 100%; height: auto; }
:where(a,button,[tabindex]):focus-visible { outline: 2px dashed #713d55; outline-offset: 4px; }
#navigation-papers { display: contents; }
.index-control { display: none; }
.content { font-size: clamp(.9rem, .96vw, 1.1rem); line-height: 1.3; }
.content-text { max-width: 72ch; margin-inline: auto; }
.content img { box-sizing: border-box; max-width: 100%; }
.content pre { overflow-x: auto; }
.doc-dates { font-size: clamp(.75rem, 1.2vw, 1rem); }
.csv-table { font-size: inherit; }

@media (max-width: 900px), (pointer: coarse) {
  html, body { min-height: 100%; height: auto; overflow-x: clip; }
  .wrapper { width: 100%; height: auto; min-height: 100dvh; overflow: visible; container-type: normal; }
  .wrapper::after, .leftbg, .top, .topframe, .leftbgblur, .frame, #folder-line { display: none; }
  .material { position: relative; isolation: isolate; width: 100%; height: auto; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); background: none; }
  .material::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url('../generated/images/7d10feebb017b16889cf-1200.webp') top left / auto 900px repeat; }
  .banner { position: relative; display: block; width: 100%; max-height: 42svh; object-fit: cover; transform: none !important; }
  .content { position: relative; width: 100%; height: auto; overflow: visible; padding: 1.2rem !important; font-size: 1rem; line-height: 1.4; }
  .content-bg { min-height: 60svh; padding: 1.1rem; outline-width: 1px; }
  .content-text { max-width: 65ch; }
  .content ul, .content ol { padding-left: 1.25em; }
  .content p { margin-bottom: 1em; }
  .content h1 { font-size: 2em; }
  .content h2 { font-size: 1.5em; }
  .content h3 { font-size: 1.17em; }
  .content :is(h1,h2,h3) { line-height: 1.1; }
  .doc-header h2 { font-size: 2em; }
  .doc-dates { font-size: .75em; line-height: 1.3; }
  .content img { margin: 1em auto .1em; }
  .content .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
  .content .grid em { font-size: .875em; }
  .content .float-right { float: none; width: 100%; margin: 1em 0; gap: .75rem; }
  .content .float-right img { height: auto; }
  .content a { overflow-wrap: anywhere; }
  .content iframe { max-width: 100%; }
  .html-embed { height: 70svh; }
  .wip-sticker { width: 6rem; left: auto; right: .5rem; top: 4rem !important; transform: none !important; opacity: 1 !important; }
  .next-page-btn { position: relative; display: block; float: right; bottom: auto; right: 1.5rem; width: 6rem; min-height: 44px; transform: scaleX(-1) !important; }
  .mute-btn { position: fixed; bottom: max(.75rem, env(safe-area-inset-bottom)); left: .5rem; width: 48px; height: 48px; z-index: 31; }
  .index-control { display: block; border: 1px solid #8c715b; background: #eedabd; color: #4a4440; box-shadow: 2px 3px 5px #0003; font: 1rem 'Azeret Mono',monospace; min-height: 44px; padding: .6rem .9rem; cursor: pointer; }
  #index-toggle { position: fixed; left: max(.5rem,env(safe-area-inset-left)); top: max(.5rem,env(safe-area-inset-top)); transform: rotate(-3deg); z-index: 40; }
  #index-close { align-self: flex-end; margin: .5rem; position: sticky; top: 0; z-index: 45; flex-shrink: 0; }
  #navigation-papers { display: flex; flex-direction: column; align-items: center; position: fixed; inset: 0; z-index: 42; height: 100dvh; box-sizing: border-box; padding: env(safe-area-inset-top) max(.6rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)); background: #97867de8; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-105%); visibility: hidden; transition: transform .25s ease,visibility .25s; }
  .index-open #navigation-papers { transform: translateX(0); visibility: visible; }
  body.index-open { overflow: hidden; }
  .card-panel, #card-files-panel, #card-folders-panel { position: relative; top: auto !important; left: auto !important; cursor: auto; touch-action: pan-y; margin-bottom: 1rem; flex-shrink: 0; }
  .card { --paper-width: min(calc(100vw - 2.4rem - env(safe-area-inset-left) - env(safe-area-inset-right)), 38rem); --paper-limit: min(calc(2070 * var(--paper-unit)), 65svh); }
  .cardicon2, .tuck-btn { display: none; }
  .receipt { --receipt-width: min(calc(100vw - 3.2rem - env(safe-area-inset-left) - env(safe-area-inset-right)), 24rem); --receipt-limit: min(calc(2429 * var(--receipt-unit)), 65svh); }
  /* Desktop's 39 source-pixel type uses a 1.08 line box: 42.12 artwork units. */
  .receipt { --receipt-row-height: calc(42.12 * var(--receipt-unit)); }
  .card-file-links a, .receipt-total { min-height: 0; display: block; line-height: var(--receipt-row-height); }
  .receipt-header { line-height: calc(70.2 * var(--receipt-unit)); }
  .receipt-divider { line-height: calc(44.46 * var(--receipt-unit)); }
}
@media (max-width: 390px) { .content .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .content img:hover { transform: none; }
}

.card a.active-folder-link { color: #566acf; }
.card a.active-folder-link::after { content: ' ■'; color: currentColor; font-size: .8em; }
@media (max-width: 900px), (pointer: coarse) {
  .material { display: flex; flex-direction: column; }
  .content { order: 1; }
  .next-page-btn { order: 2; float: none; align-self: flex-end; margin-bottom: 1rem; }
  .material:not(:has(.banner[src])) { padding-top: 3.5rem; }
}
.image-viewer { display: block; }
.pswp { --pswp-bg: #29231f; --pswp-icon-color: #f5e9d5; z-index: 2000; }
.pswp__img { border: 6px solid #f7f0e5; box-sizing: border-box; }
.pswp__caption { position: absolute; bottom: 3.5rem; left: 5%; width: 90%; text-align: center; color: #fff5e5; font: 1rem/1.5 Georgia,serif; pointer-events: none; }
.pswp__original { position: absolute; bottom: max(.5rem,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: #fff5e5; font: .875rem/1.4 monospace; padding: .75rem; min-height: 44px; box-sizing: border-box; }
@media (max-width: 900px), (pointer: coarse) { .pswp__button { min-width: 48px; min-height: 48px; } }
@media (max-width: 900px), (pointer: coarse) {
  #navigation-papers .card, #navigation-papers .receipt { background-image: none; }
  .index-open #navigation-papers .card { background-image: url('../generated/images/e056be4273fd5ced7b43-1200.webp'); }
  .index-open #navigation-papers .receipt { background-image: url('../generated/images/e89eebd357642bb09397-936.webp'); }
}

.animation-control { border: 1px dashed #8c715b; background: #f1e4d0; color: #4a4440; font: inherit; min-height: 44px; padding: .5rem .8rem; cursor: pointer; margin-block: .25rem 1rem; }
/* Controls must remain readable over pale photographs and scanned borders. */
.pswp .pswp__top-bar { background: linear-gradient(#29231fd9, transparent); }
.pswp .pswp__original { background: #29231fe6; border-radius: 2px; }
.pswp .pswp__caption:not(:empty) { background: #29231fe6; padding: .35rem; box-sizing: border-box; }

.doc-header { margin-bottom: 2.5em; }
.doc-dates { margin-bottom: 2em; }
.content h3 { margin-bottom: .5em; }
.content .video, .content iframe { box-sizing: border-box; max-width: 100%; }

/* Profiles change the interior measure, never the physical sheet or grid. */
.layout-essay .content-text { max-width: 70ch; }
.layout-project .content-text { max-width: 72ch; }
.layout-gallery .content-text { max-width: 65ch; }
.layout-gallery .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.layout-gallery .grid p { margin: 0; }
.layout-gallery .grid img { margin-top: 0; }
@media (min-width: 2400px) and (pointer: fine) {
  .layout-gallery .grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) { .layout-gallery .grid { grid-template-columns: minmax(0,1fr); } }
.layout-index .content-text { max-width: 70ch; }
.collection-index { margin-block: 0 2em; }
.collection-index ol { list-style: none; padding: 0; margin: 0; }
.collection-index li { display: grid; grid-template-columns: 10ch 1fr auto; gap: .8em; align-items: baseline; padding-block: .3em; }
.collection-index time { font-size: .85em; font-variant-numeric: tabular-nums; }
.collection-index .entry-status { font-size: .75em; opacity: .75; }
.collection-index a { text-decoration: none; }
.collection-index a:focus-visible { text-decoration: underline; }
@media (hover: hover) { .collection-index a:hover { text-decoration: underline; } }
@media (max-width: 600px) {
  .collection-index li { grid-template-columns: 9ch 1fr; gap: .5em; }
  .collection-index .entry-status { grid-column: 2; }
}
.layout-catalog .content-text { max-width: 80ch; }
.layout-catalog :is(p,li,dd) { margin-block: .25em; }
.layout-catalog :is(h2,h3) { margin-block: 1.5em .5em; }
.layout-catalog dl { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: .35em 1em; }
.layout-catalog dd { margin-inline: 0; }
.layout-custom .content-text { max-width: none; }

/* Stabilization: position transitions only; the paper remains mounted. */
#card-files-panel { transition: transform .35s ease; }
#card-files-panel.is-tucked { transform: translateY(calc(-100% - 100vh)); }
@media (min-width: 901px) and (pointer: fine) {
  /* Restore just over half of the original -1.69cqw side margins. */
  .content-bg { margin-inline: -1cqw; }
  .content-text, .layout-project .content-text { max-width: 76ch; }
  /* One boundary for the illustrated plane and the unchanged 58% grid pane. */
  .leftbg img { width: calc(42vw - 3px); }
}
#folder-line { position: fixed; }
#folder-line path { fill: none; stroke: #4a4440; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: connector-fade 1.2s ease forwards; }
@keyframes connector-fade { from { opacity: .65; } to { opacity: 0; } }
@media (max-width: 900px), (pointer: coarse) {
  /* No filtered or blended text layers, and no retained identity transform. */
  .content-text { mix-blend-mode: normal; }
  .content-text :is(p,li,h1,h2,h3,h4,h5,h6), .doc-dates,
  .card-section-header, .card a, .receipt :is(a,.receipt-header,.receipt-divider,.receipt-total) {
    filter: none; text-shadow: none; transform: none; mix-blend-mode: normal; opacity: 1;
  }
  .doc-dates { color: #716b67; }
  .card, .receipt { filter: none; position: relative; isolation: isolate; }
  /* Shadows belong to artwork layers, never to ancestors of readable text. */
  .card::before, .receipt::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: inherit; filter: drop-shadow(4px 5px 7px #0003); }
  .index-open #navigation-papers { transform: none; }
  #card-files-panel { height: 65svh; transition: transform .35s ease; }
  #card-files-panel.is-open { transform: none; }
  #card-files-panel.is-tucked { left: auto !important; transform: translateX(calc(-100% - 1rem)); }
  #navigation-papers { overflow-x: hidden; }
}

#card-files-panel.dragging { transition: none; }
@media (prefers-reduced-motion: reduce) { #card-files-panel { transition-duration: .01ms; } }