/* generated by gen_torn.py: torn paper edges */
:root {
  --torn-a: polygon(0% 2.26px, 2.94% 4.62px, 5.88% 2.54px, 8.82% 0.92px, 11.76% 3.15px, 14.71% 0.47px, 17.65% 0.45px, 20.59% 10.89px, 23.53% 4.82px, 26.47% 3.08px, 29.41% 0.08px, 32.35% 0.3px, 35.29% 7.78px, 38.24% 2.2px, 41.18% 2.6px, 44.12% 2.5px, 47.06% 2.29px, 50% 4.99px, 52.94% 4.2px, 55.88% 1.58px, 58.82% 9.6px, 61.76% 2px, 64.71% 1.93px, 67.65% 6.26px, 70.59% 4.55px, 73.53% 4.9px, 76.47% 0.37px, 79.41% 3.89px, 82.35% 0.44px, 85.29% 4.82px, 88.24% 0.59px, 91.18% 9.78px, 94.12% 0.89px, 97.06% 2.24px, 100% 8.86px, calc(100% - 0.47px) 0%, calc(100% - 0.85px) 4.55%, calc(100% - 3.88px) 9.09%, calc(100% - 1.22px) 13.64%, calc(100% - 0.84px) 18.18%, calc(100% - 3.42px) 22.73%, calc(100% - 0.4px) 27.27%, calc(100% - 0.85px) 31.82%, calc(100% - 3.09px) 36.36%, calc(100% - 4.43px) 40.91%, calc(100% - 2.33px) 45.45%, calc(100% - 2.41px) 50%, calc(100% - 1.81px) 54.55%, calc(100% - 1.93px) 59.09%, calc(100% - 3.47px) 63.64%, calc(100% - 0.62px) 68.18%, calc(100% - 3.27px) 72.73%, calc(100% - 0.76px) 77.27%, calc(100% - 3.76px) 81.82%, calc(100% - 3.8px) 86.36%, calc(100% - 2.41px) 90.91%, calc(100% - 8.62px) 95.45%, calc(100% - 0.95px) 100%, 100% calc(100% - 1.28px), 97.06% calc(100% - 2.98px), 94.12% calc(100% - 0.88px), 91.18% calc(100% - 0.34px), 88.24% calc(100% - 2.8px), 85.29% calc(100% - 3.07px), 82.35% calc(100% - 4.59px), 79.41% calc(100% - 0.08px), 76.47% calc(100% - 6.06px), 73.53% calc(100% - 1.84px), 70.59% calc(100% - 0.66px), 67.65% calc(100% - 4.45px), 64.71% calc(100% - 3.28px), 61.76% calc(100% - 5.21px), 58.82% calc(100% - 0.09px), 55.88% calc(100% - 3.5px), 52.94% calc(100% - 0.11px), 50% calc(100% - 2.41px), 47.06% calc(100% - 1.59px), 44.12% calc(100% - 0.38px), 41.18% calc(100% - 3.69px), 38.24% calc(100% - 3.69px), 35.29% calc(100% - 3.97px), 32.35% calc(100% - 1.76px), 29.41% calc(100% - 4.5px), 26.47% calc(100% - 2.09px), 23.53% calc(100% - 4.32px), 20.59% calc(100% - 3.12px), 17.65% calc(100% - 2.91px), 14.71% calc(100% - 0.4px), 11.76% calc(100% - 4.97px), 8.82% calc(100% - 3.64px), 5.88% calc(100% - 3.68px), 2.94% calc(100% - 2.2px), 0% calc(100% - 0.42px), 0.12px 100%, 1.92px 95.45%, 2.79px 90.91%, 2.46px 86.36%, 5.44px 81.82%, 2.71px 77.27%, 0.68px 72.73%, 2.64px 68.18%, 3.57px 63.64%, 2.66px 59.09%, 1.72px 54.55%, 3.66px 50%, 1.54px 45.45%, 1.27px 40.91%, 1.99px 36.36%, 3.39px 31.82%, 3.8px 27.27%, 0.68px 22.73%, 1.1px 18.18%, 1.66px 13.64%, 1.98px 9.09%, 3.36px 4.55%, 4.15px 0%);
  --torn-b: polygon(0% 3.7px, 2.94% 6.96px, 5.88% 1.69px, 8.82% 0.52px, 11.76% 1.78px, 14.71% 4.43px, 17.65% 2.84px, 20.59% 2.05px, 23.53% 7.92px, 26.47% 2.36px, 29.41% 2.48px, 32.35% 1.45px, 35.29% 1.47px, 38.24% 2.64px, 41.18% 0.34px, 44.12% 2.87px, 47.06% 1.79px, 50% 0.73px, 52.94% 1.29px, 55.88% 4.49px, 58.82% 0.16px, 61.76% 2.29px, 64.71% 1.32px, 67.65% 1.15px, 70.59% 3.11px, 73.53% 7.92px, 76.47% 2.83px, 79.41% 0.95px, 82.35% 3.67px, 85.29% 3.78px, 88.24% 6.08px, 91.18% 0.09px, 94.12% 2.75px, 97.06% 3.22px, 100% 2.15px, calc(100% - 2.4px) 0%, calc(100% - 3.12px) 4.55%, calc(100% - 5.06px) 9.09%, calc(100% - 0.63px) 13.64%, calc(100% - 3.04px) 18.18%, calc(100% - 0.33px) 22.73%, calc(100% - 0.54px) 27.27%, calc(100% - 2.6px) 31.82%, calc(100% - 1.35px) 36.36%, calc(100% - 1.42px) 40.91%, calc(100% - 2.86px) 45.45%, calc(100% - 2.86px) 50%, calc(100% - 1.32px) 54.55%, calc(100% - 2.66px) 59.09%, calc(100% - 0.76px) 63.64%, calc(100% - 1.31px) 68.18%, calc(100% - 1.78px) 72.73%, calc(100% - 5.72px) 77.27%, calc(100% - 1.06px) 81.82%, calc(100% - 2.67px) 86.36%, calc(100% - 5.45px) 90.91%, calc(100% - 1.73px) 95.45%, calc(100% - 1.79px) 100%, 100% calc(100% - 1.8px), 97.06% calc(100% - 0.02px), 94.12% calc(100% - 8.34px), 91.18% calc(100% - 0.81px), 88.24% calc(100% - 0.69px), 85.29% calc(100% - 7.5px), 82.35% calc(100% - 1.92px), 79.41% calc(100% - 2.16px), 76.47% calc(100% - 2.1px), 73.53% calc(100% - 8.38px), 70.59% calc(100% - 3.45px), 67.65% calc(100% - 3.11px), 64.71% calc(100% - 2.42px), 61.76% calc(100% - 1.28px), 58.82% calc(100% - 1.21px), 55.88% calc(100% - 1.37px), 52.94% calc(100% - 1.68px), 50% calc(100% - 1.91px), 47.06% calc(100% - 1.02px), 44.12% calc(100% - 0.36px), 41.18% calc(100% - 1.06px), 38.24% calc(100% - 6.31px), 35.29% calc(100% - 0.48px), 32.35% calc(100% - 1.77px), 29.41% calc(100% - 1.04px), 26.47% calc(100% - 0.99px), 23.53% calc(100% - 8.04px), 20.59% calc(100% - 1.1px), 17.65% calc(100% - 0.59px), 14.71% calc(100% - 0.36px), 11.76% calc(100% - 1.58px), 8.82% calc(100% - 8.58px), 5.88% calc(100% - 2.62px), 2.94% calc(100% - 3.9px), 0% calc(100% - 7.05px), 0.45px 100%, 1.5px 95.45%, 1.82px 90.91%, 2.63px 86.36%, 1.89px 81.82%, 6.63px 77.27%, 0.66px 72.73%, 1.01px 68.18%, 1.71px 63.64%, 1.4px 59.09%, 2.08px 54.55%, 2.96px 50%, 2.84px 45.45%, 3.14px 40.91%, 1.22px 36.36%, 4.78px 31.82%, 2.32px 27.27%, 1.71px 22.73%, 4.46px 18.18%, 1.37px 13.64%, 1.89px 9.09%, 0.79px 4.55%, 2.15px 0%);
  --torn-c: polygon(0% 10.32px, 2.94% 5.05px, 5.88% 3.09px, 8.82% 2.22px, 11.76% 0.65px, 14.71% 3.6px, 17.65% 2.27px, 20.59% 2.66px, 23.53% 5.83px, 26.47% 8.02px, 29.41% 2.17px, 32.35% 4.96px, 35.29% 3.84px, 38.24% 0.2px, 41.18% 1.28px, 44.12% 0.05px, 47.06% 10.06px, 50% 0.14px, 52.94% 0.96px, 55.88% 4.37px, 58.82% 1.31px, 61.76% 4.2px, 64.71% 5.5px, 67.65% 1.7px, 70.59% 2.89px, 73.53% 9.14px, 76.47% 10.54px, 79.41% 0.53px, 82.35% 13px, 85.29% 0.39px, 88.24% 3.03px, 91.18% 3.18px, 94.12% 3.46px, 97.06% 1.77px, 100% 4.17px, calc(100% - 0px) 0%, calc(100% - 0px) 100%, 100% calc(100% - 3.12px), 97.06% calc(100% - 0.05px), 94.12% calc(100% - 11.28px), 91.18% calc(100% - 2.41px), 88.24% calc(100% - 1.17px), 85.29% calc(100% - 0.28px), 82.35% calc(100% - 4.23px), 79.41% calc(100% - 4.21px), 76.47% calc(100% - 3.3px), 73.53% calc(100% - 0.25px), 70.59% calc(100% - 4.04px), 67.65% calc(100% - 5.8px), 64.71% calc(100% - 0.03px), 61.76% calc(100% - 10.14px), 58.82% calc(100% - 2.67px), 55.88% calc(100% - 4.53px), 52.94% calc(100% - 5.79px), 50% calc(100% - 5.16px), 47.06% calc(100% - 5.1px), 44.12% calc(100% - 0.41px), 41.18% calc(100% - 3.72px), 38.24% calc(100% - 3.92px), 35.29% calc(100% - 0.52px), 32.35% calc(100% - 0.22px), 29.41% calc(100% - 0.26px), 26.47% calc(100% - 5.65px), 23.53% calc(100% - 0.52px), 20.59% calc(100% - 1.05px), 17.65% calc(100% - 4.06px), 14.71% calc(100% - 0.99px), 11.76% calc(100% - 12.62px), 8.82% calc(100% - 9.35px), 5.88% calc(100% - 0.59px), 2.94% calc(100% - 11.18px), 0% calc(100% - 1.98px), 0px 100%, 0px 0%);
  --torn-d: polygon(0% 0.78px, 3.85% 0.52px, 7.69% 0.74px, 11.54% 2.96px, 15.38% 3.1px, 19.23% 1.75px, 23.08% 1.88px, 26.92% 3.19px, 30.77% 3.15px, 34.62% 0.09px, 38.46% 1.53px, 42.31% 0.57px, 46.15% 1.18px, 50% 2.96px, 53.85% 0.62px, 57.69% 1.4px, 61.54% 1.5px, 65.38% 3.16px, 69.23% 2.64px, 73.08% 1.89px, 76.92% 3.16px, 80.77% 0.05px, 84.62% 1.33px, 88.46% 6.64px, 92.31% 1.76px, 96.15% 1.15px, 100% 0.38px, calc(100% - 1.67px) 0%, calc(100% - 2.12px) 6.25%, calc(100% - 2.55px) 12.5%, calc(100% - 1.65px) 18.75%, calc(100% - 1.34px) 25%, calc(100% - 2.37px) 31.25%, calc(100% - 3.84px) 37.5%, calc(100% - 0.22px) 43.75%, calc(100% - 1.49px) 50%, calc(100% - 2.2px) 56.25%, calc(100% - 1.87px) 62.5%, calc(100% - 0.55px) 68.75%, calc(100% - 0.14px) 75%, calc(100% - 1.37px) 81.25%, calc(100% - 2.51px) 87.5%, calc(100% - 2.27px) 93.75%, calc(100% - 1.23px) 100%, 100% calc(100% - 2.05px), 96.15% calc(100% - 4.96px), 92.31% calc(100% - 5.71px), 88.46% calc(100% - 2.17px), 84.62% calc(100% - 1.78px), 80.77% calc(100% - 3.07px), 76.92% calc(100% - 2.25px), 73.08% calc(100% - 2.33px), 69.23% calc(100% - 0.05px), 65.38% calc(100% - 0.89px), 61.54% calc(100% - 3.16px), 57.69% calc(100% - 1.29px), 53.85% calc(100% - 1.23px), 50% calc(100% - 1.83px), 46.15% calc(100% - 2.19px), 42.31% calc(100% - 1.31px), 38.46% calc(100% - 1.04px), 34.62% calc(100% - 6.5px), 30.77% calc(100% - 0.69px), 26.92% calc(100% - 0.17px), 23.08% calc(100% - 4.24px), 19.23% calc(100% - 2.98px), 15.38% calc(100% - 0.01px), 11.54% calc(100% - 0.23px), 7.69% calc(100% - 1.71px), 3.85% calc(100% - 0.45px), 0% calc(100% - 0.88px), 2.37px 100%, 0px 93.75%, 1.11px 87.5%, 4.29px 81.25%, 1.65px 75%, 1.57px 68.75%, 1.97px 62.5%, 2.2px 56.25%, 1.63px 50%, 1.34px 43.75%, 0.53px 37.5%, 2.17px 31.25%, 0.19px 25%, 0.3px 18.75%, 1.45px 12.5%, 1.68px 6.25%, 1.31px 0%);
  --torn-e: polygon(0% 0.34px, 2.94% 4.37px, 5.88% 4.25px, 8.82% 2.8px, 11.76% 5.47px, 14.71% 0.16px, 17.65% 6.2px, 20.59% 1.8px, 23.53% 0.06px, 26.47% 4.08px, 29.41% 0.72px, 32.35% 9.83px, 35.29% 3.44px, 38.24% 2.93px, 41.18% 6.47px, 44.12% 1.96px, 47.06% 0.01px, 50% 7.83px, 52.94% 3.93px, 55.88% 3.31px, 58.82% 9.3px, 61.76% 5.55px, 64.71% 2.42px, 67.65% 4.28px, 70.59% 2.46px, 73.53% 0.28px, 76.47% 1.72px, 79.41% 3.94px, 82.35% 0.64px, 85.29% 2.19px, 88.24% 2.17px, 91.18% 2.64px, 94.12% 3.06px, 97.06% 3.57px, 100% 2.92px, calc(100% - 0px) 0%, calc(100% - 0px) 100%, 100% calc(100% - 0.33px), 97.06% calc(100% - 6.1px), 94.12% calc(100% - 3.46px), 91.18% calc(100% - 2.42px), 88.24% calc(100% - 8.04px), 85.29% calc(100% - 2.3px), 82.35% calc(100% - 2.8px), 79.41% calc(100% - 0.26px), 76.47% calc(100% - 1.01px), 73.53% calc(100% - 3.41px), 70.59% calc(100% - 4.31px), 67.65% calc(100% - 4.29px), 64.71% calc(100% - 3.09px), 61.76% calc(100% - 7.92px), 58.82% calc(100% - 2.7px), 55.88% calc(100% - 1.59px), 52.94% calc(100% - 0.89px), 50% calc(100% - 5.02px), 47.06% calc(100% - 6.09px), 44.12% calc(100% - 3.35px), 41.18% calc(100% - 4.22px), 38.24% calc(100% - 2.03px), 35.29% calc(100% - 3.74px), 32.35% calc(100% - 4.21px), 29.41% calc(100% - 2.56px), 26.47% calc(100% - 0.13px), 23.53% calc(100% - 7.58px), 20.59% calc(100% - 6.22px), 17.65% calc(100% - 3.99px), 14.71% calc(100% - 0.31px), 11.76% calc(100% - 1.11px), 8.82% calc(100% - 4.4px), 5.88% calc(100% - 8.27px), 2.94% calc(100% - 1.84px), 0% calc(100% - 1.49px), 0px 100%, 0px 0%);
}
/* =========================================================================
   Character file: Dr. Marielle Ambrosia Baptiste
   A case board built from real text, the author's art, and paper textures.
   ========================================================================= */

.page-character {
  --cf-ink: #2a1f18;
  --cf-ink-2: #514234;
  --cf-plum: #4b2563;
  --cf-plum-2: #6a3e84;
  --cf-hand: #3d1f50;
  --cf-gold: #c9a46a;
  --cf-gold-hi: #ecd3a5;
  --cf-lilac: #b9a1d8;
  --cf-card: #0f0b0e;
  --cf-glow: 118, 42, 104;
  --cf-hand-font: "La Belle Aurore", "Homemade Apple", "Segoe Script", "Bradley Hand", cursive;
  --paper: url("/assets/img/textures/paper.webp?v=149eabe455");
  --board: url("/assets/img/textures/board.webp?v=5c248fec12");
}


/* per-file colour stories (Marielle's plum is the default above) */
.file-tessa { --cf-plum: #6b1f2a; --cf-plum-2: #8c2f3c; --cf-hand: #4a1820; --cf-lilac: #e3a7b2; --cf-glow: 128, 28, 44; }
.file-cal { --cf-plum: #6a4320; --cf-plum-2: #8a5a2b; --cf-hand: #3a2a1c; --cf-lilac: #e6bd84; --cf-glow: 150, 96, 34; }
.file-evelyn { --cf-plum: #3f4a66; --cf-plum-2: #5f5488; --cf-hand: #2f2d48; --cf-lilac: #c6badf; --cf-glow: 92, 84, 140; }
.file-preston { --cf-plum: #1f3354; --cf-plum-2: #36557f; --cf-hand: #1c2a44; --cf-lilac: #dcc38d; --cf-glow: 44, 76, 140; }

.cf {
  position: relative;
  background:
    radial-gradient(ellipse 45% 35% at 18% 12%, rgba(var(--cf-glow), .2), transparent 70%),
    radial-gradient(ellipse 40% 30% at 82% 46%, rgba(var(--cf-glow), .14), transparent 70%),
    radial-gradient(ellipse 50% 30% at 40% 92%, rgba(var(--cf-glow), .12), transparent 70%),
    var(--board) 0 0 / 640px repeat,
    #0d0a0c;
  border-bottom: 1px solid var(--line);
}
.cf-wrap { max-width: 1520px; margin: 0 auto; padding: 22px clamp(14px, 2.6vw, 40px) clamp(48px, 5vw, 80px); }

/* breadcrumb */
.cf-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 26px; font: 400 10.5px/1.6 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cf-crumbs a { color: var(--gold); border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.cf-crumbs a:hover { color: var(--gold-hi); border-color: var(--line); }
.cf-crumbs .sep { color: var(--line); }
.cf-crumbs [aria-current] { color: #d9d2cb; }

/* ---------- shared paper + card surfaces ---------- */
.paper {
  position: relative; isolation: isolate;
  color: var(--cf-ink);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)) drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
}
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(111, 78, 42, .26) 100%),
    var(--paper) 0 0 / 512px repeat,
    #e6dbc3;
  clip-path: var(--torn, none);
}
.torn-a { --torn: var(--torn-a); }
.torn-b { --torn: var(--torn-b); }
.torn-c { --torn: var(--torn-c); }
.torn-d { --torn: var(--torn-d); }
.torn-e { --torn: var(--torn-e); }

.ink-card {
  position: relative;
  color: #e4ddd5;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%),
    var(--board) 0 0 / 640px repeat,
    var(--cf-card);
  border: 1px solid rgba(201, 164, 106, .3);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .55), inset 0 0 0 5px var(--cf-card), inset 0 0 0 6px rgba(201, 164, 106, .14);
  padding: 22px 22px 22px;
}
.ink-card h2, .paper h2 {
  font: 500 13px/1.3 var(--f-display);
  letter-spacing: .26em; text-transform: uppercase;
}
.ink-card h2 { color: var(--cf-lilac); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid rgba(201, 164, 106, .32); }
.paper h2 { color: var(--cf-plum); padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid rgba(75, 37, 99, .28); }
.paper h2 small { font: 400 10.5px var(--f-display); letter-spacing: .14em; color: var(--cf-ink-2); }

.hand { font-family: var(--cf-hand-font); font-weight: 400; color: var(--cf-hand); line-height: 1.3; }

/* tape, clips, prints */
.tape {
  position: absolute; z-index: 3; width: 92px; height: 24px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, rgba(226, 211, 176, .86), rgba(196, 177, 138, .8));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  clip-path: polygon(0 8%, 4% 0, 8% 12%, 12% 2%, 88% 0, 92% 10%, 96% 1%, 100% 9%, 100% 92%, 96% 100%, 92% 88%, 88% 100%, 12% 98%, 8% 88%, 4% 100%, 0 91%);
}
.clip { position: absolute; z-index: 4; width: 18px; height: 52px; color: var(--cf-gold); filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .55)); pointer-events: none; }

.print { position: relative; margin: 0; }
.print img { display: block; width: 100%; height: auto; }
.print.framed { background: #ece3d2; padding: 7px; box-shadow: 0 10px 18px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4); }
.print.torn img { clip-path: var(--torn); }
.print.torn { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

.polaroid { position: relative; margin: 0; background: #efe8db; padding: 9px 9px 0; box-shadow: 0 14px 22px rgba(0, 0, 0, .6), 0 2px 3px rgba(0, 0, 0, .45); }
.polaroid img { display: block; width: 100%; height: auto; }
.polaroid figcaption { min-height: 44px; padding: 8px 4px 10px; font-size: 17px; text-align: center; color: #3a2a4a; }

.prop { position: absolute; z-index: 1; pointer-events: none; user-select: none; height: auto; }

.note {
  position: absolute; z-index: 4; margin: 0;
  font-size: 19px; line-height: 1.28;
}
.note.on-ink {
  padding: 14px 16px 16px; color: var(--cf-gold-hi);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent), var(--board) 0 0 / 640px, #151014;
  border: 1px solid rgba(201, 164, 106, .25);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .6);
}
.note.on-paper { padding: 14px 16px 16px; }

/* =========================================================================
   The board
   ========================================================================= */
.cf-board {
  display: grid;
  grid-template-columns: minmax(0, 28fr) minmax(0, 28fr) minmax(0, 44fr);
  grid-template-areas: "c1 c2 c3";
  gap: 30px 26px;
  align-items: start;
}
/* desktop: three hand-stacked columns, like the pinned board */
.cf-col { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.cf-col-1 { grid-area: c1; }
.cf-col-2 { grid-area: c2; }
.cf-col-3 { grid-area: c3; }
.cf-pair { display: grid; grid-template-columns: minmax(0, 20fr) minmax(0, 24fr); gap: 26px; align-items: start; }

/* ---------- hero ---------- */
.cf-hero { position: relative; padding: 44px 0 150px 34px; }
.cf-portrait { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); }
.cf-hero .n-unseen { left: -6px; top: 0; width: 150px; transform: rotate(-4deg); font-size: 21px; line-height: 1.22; }
.cf-hero .n-unseen .clip { left: 18px; top: -26px; transform: rotate(8deg); }
.cf-hero .n-evidence { left: -10px; top: 46%; width: 170px; transform: rotate(3deg); font-size: 19px; }
.cf-hero .n-evidence .tape { left: 40px; top: -12px; width: 80px; transform: rotate(-6deg); }
.cf-hero .prints { left: 0; bottom: 92px; width: 120px; transform: rotate(-7deg); z-index: 3; box-shadow: 0 8px 14px rgba(0, 0, 0, .6); }
.cf-hero .books { right: -8px; bottom: 0; width: 82%; z-index: 3; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)); }

/* ---------- title card ---------- */
.cf-title { padding: 34px 30px 34px 30px; transform: rotate(.5deg); margin-top: 6px; }
.cf-title .tape.t1 { left: 44%; top: -11px; transform: rotate(-2deg); }
.cf-kicker { font: 400 10.5px/1.5 var(--f-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--cf-ink-2); }
.cf-name { margin-top: 12px; font-family: var(--f-display); font-weight: 500; line-height: 1.02; text-transform: uppercase; }
.cf-name .first { display: block; font-size: clamp(30px, 2.65vw, 43px); letter-spacing: .015em; color: #1c140f; }
.cf-name .last { display: block; margin-top: 6px; font-size: clamp(19px, 1.62vw, 26px); letter-spacing: .06em; color: var(--cf-plum); }
.cf-rule { height: 1px; margin: 14px 0 12px; background: linear-gradient(90deg, rgba(42, 31, 24, .55), rgba(42, 31, 24, .12)); }
.cf-role { font: 500 11.5px/1.75 var(--f-display); letter-spacing: .32em; text-transform: uppercase; color: var(--cf-ink); }
.cf-quote { position: relative; margin: 20px 0 6px; padding: 14px 44px 16px 0; border-top: 1px solid rgba(42, 31, 24, .16); border-bottom: 1px solid rgba(42, 31, 24, .16); }
.cf-quote p { font-size: clamp(19px, 1.45vw, 22px); line-height: 1.32; color: var(--cf-plum-2); }
.cf-quote .sigil { position: absolute; right: -4px; top: 50%; width: 32px; height: auto; transform: translateY(-50%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.cf-facts { margin-top: 10px; }
.cf-facts div { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(42, 31, 24, .16); }
.cf-facts div:last-child { border-bottom: 0; }
.cf-facts dt { padding-top: 3px; font: 500 10px/1.45 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--cf-plum); }
.cf-facts dd { font-size: 15.5px; line-height: 1.38; color: var(--cf-ink); }
.cf-moons { position: absolute; right: -24px; top: 120px; width: 30px; z-index: 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }

/* ---------- top-right cluster ---------- */
.cf-cluster { position: relative; aspect-ratio: 570 / 548; }
.cf-cluster .p-sketch { position: absolute; left: 0; top: 4px; width: 44%; transform: rotate(-2deg); z-index: 2; }
.cf-cluster .p-sketch .clip { left: 22px; top: -22px; transform: rotate(-6deg); }
.cf-cluster .xray { left: 41%; top: 0; width: 16%; transform: rotate(3deg); z-index: 1; box-shadow: 0 10px 16px rgba(0, 0, 0, .6); }
.cf-cluster .p-profile { position: absolute; left: 3%; bottom: 6px; width: 25%; padding: 6px; transform: rotate(-5deg); z-index: 2; }
.cf-cluster .lily-note { position: absolute; right: 0; top: 10px; width: 41%; padding: 10px 12px 14px; transform: rotate(2.2deg); z-index: 2; }
.cf-cluster .lily-note img { display: block; width: 100%; height: auto; }
.cf-cluster .lily-note figcaption { margin-top: 4px; font-size: 21px; line-height: 1.2; text-align: right; padding-right: 6px; }
.cf-cluster .lily-note .tape { right: 38%; top: -12px; transform: rotate(4deg); }
.cf-cluster .p-side { position: absolute; left: 39%; bottom: 4px; width: 36%; transform: rotate(-3deg); z-index: 3; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .6)); }
.cf-cluster .p-side img { display: block; width: 100%; height: auto; }
.cf-cluster .p-side .tape { left: 34%; top: -6px; transform: rotate(-5deg); }
.cf-cluster .n-observer { right: 0; top: 56%; width: 22%; padding: 18px 12px 14px 18px; transform: rotate(3deg); font-size: 19px; line-height: 1.16; }
.cf-cluster .n-observer .tape { left: calc(50% - 30px); top: -10px; width: 60px; transform: rotate(-5deg); }

/* ---------- details strip ---------- */
.cf-details { padding: 18px 18px 16px; }
.cf-details h2 { margin-bottom: 12px; }
.cf-details ul { display: grid; grid-template-columns: 1.05fr 1.35fr 1fr .85fr .78fr; gap: 12px; align-items: start; }
.cf-details figure { margin: 0; }
.cf-details img { display: block; width: 100%; height: 118px; object-fit: cover; border: 1px solid rgba(236, 211, 165, .35); box-shadow: 0 6px 12px rgba(0, 0, 0, .55); }
.cf-details figcaption { margin-top: 8px; font: 400 9.5px/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #cfc6bd; }

/* ---------- profile ---------- */
.cf-profile { padding: 28px 28px 30px; transform: rotate(-.4deg); }
.cf-profile p { font-size: 16.5px; line-height: 1.58; color: var(--cf-ink); }
.cf-profile p + p { margin-top: 12px; }
.cf-profile .tape { left: 18px; top: -10px; transform: rotate(-8deg); width: 74px; }

/* ---------- physical description ---------- */
.cf-physical { padding: 26px 22px 104px; transform: rotate(.6deg); }
.cf-physical dl div { padding: 8px 0; border-bottom: 1px solid rgba(42, 31, 24, .16); }
.cf-physical dl div:last-child { border-bottom: 0; }
.cf-physical dt { font: 500 10.5px/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--cf-plum); }
.cf-physical dd { margin-top: 2px; font-size: 15.5px; line-height: 1.4; }
.cf-physical .prints { left: 20px; bottom: 14px; width: 104px; transform: rotate(-3deg); mix-blend-mode: multiply; opacity: .85; }
.cf-physical .clip { right: 26px; top: -20px; transform: rotate(10deg); }

/* ---------- sketches (investigative notes) ---------- */
.cf-sketches { padding: 24px 22px 22px; transform: rotate(-.5deg); }
.cf-sketches .sk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-sketches .sk-row figure { margin: 0; }
.cf-sketches .sk-row img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: 50% 20%; box-shadow: 0 6px 12px rgba(0, 0, 0, .3); }
.cf-sketches .sk-eye { display: grid; grid-template-columns: 1fr 1.05fr; gap: 14px; align-items: center; margin-top: 14px; }
.cf-sketches .sk-eye img { display: block; width: 100%; height: auto; box-shadow: 0 6px 12px rgba(0, 0, 0, .3); transform: rotate(-2deg); }
.cf-sketches .sk-eye p { font-size: 19px; }
.cf-sketches > .tape { left: calc(50% - 40px); top: -11px; width: 80px; transform: rotate(-3deg); }
.cf-sketches .sig { margin-top: 8px; text-align: right; font-size: 24px; color: #2a1d33; }

/* ---------- polaroids ---------- */
.cf-polaroids { position: relative; min-height: 470px; }
.cf-polaroids .pol-a { position: absolute; left: 0; top: 16px; width: 55%; transform: rotate(-4deg); z-index: 2; }
.cf-polaroids .pol-b { position: absolute; right: 1%; top: 150px; width: 55%; transform: rotate(4.5deg); z-index: 1; }
.cf-polaroids .pol-a .tape { left: 30%; top: -12px; transform: rotate(3deg); }
.cf-polaroids .pol-b .tape { left: 32%; top: -10px; transform: rotate(-4deg); }
.cf-polaroids .flowers { left: -30px; bottom: -14px; width: 46%; z-index: 3; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); }

/* ---------- personality ---------- */
.cf-personality { }
.cf-traits { position: relative; padding-left: 24px; }
.cf-traits::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; border-left: 1px dotted rgba(201, 164, 106, .55); }
.cf-traits li { position: relative; padding: 5px 0 7px; }
.cf-traits li::before { content: ""; position: absolute; left: -23px; top: 13px; width: 7px; height: 7px; background: var(--cf-gold); transform: rotate(45deg); }
.cf-traits .t { display: block; font-size: 17px; color: #f1ece6; }
.cf-traits .d { display: block; font-size: 15px; line-height: 1.4; color: #b8aea6; font-style: italic; }

/* ---------- associated personnel ---------- */
.cf-associates { }
.cf-associates h3 { font: 500 12px/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--cf-lilac); }
.cf-associates h3 + p { margin-top: 4px; font-size: 16px; line-height: 1.5; color: #ddd6ce; }
.cf-associates p + h3 { margin-top: 18px; }

/* ---------- botanical + celestial ---------- */
.cf-botanical { overflow: hidden; }
.cf-botanical .bot-art { position: relative; height: 240px; }
.cf-botanical .bot-flower { position: absolute; left: -30px; bottom: -26px; height: 96%; width: auto; max-width: none; }
.cf-botanical .bot-sigil { position: absolute; right: 22%; top: 2px; width: 46px; height: auto; }
.cf-botanical .bot-moons { position: absolute; right: 2%; top: 4px; width: 34px; height: auto; }
.cf-botanical .bot-crescent { position: absolute; left: 6%; top: 8px; width: 64px; height: 64px; color: var(--cf-gold); filter: drop-shadow(0 0 10px rgba(236, 211, 165, .25)); }
.cf-botanical .bot-star { position: absolute; width: 16px; height: 16px; color: var(--cf-gold-hi); }
.cf-botanical .bot-star.s1 { left: 38%; top: 18px; }
.cf-botanical .bot-star.s2 { left: 30%; top: 86px; width: 10px; height: 10px; opacity: .8; }
.cf-botanical .bot-star.s3 { right: 30%; top: 128px; width: 22px; height: 22px; }

/* ---------- attachments ---------- */
.cf-attach { position: relative; min-height: 330px; }
.cf-attach .label { position: absolute; left: 0; top: 0; font: 500 11px/1.3 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.cf-attach .skull { position: absolute; left: 0; top: 30px; width: 44%; height: auto; transform: rotate(-3deg); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }
.cf-attach .letter { position: absolute; left: 40%; top: 46px; width: 26%; height: auto; transform: rotate(4deg); box-shadow: 0 10px 16px rgba(0, 0, 0, .6); }
.cf-attach .city { position: absolute; right: 0; top: 150px; width: 40%; height: auto; transform: rotate(-2deg); box-shadow: 0 10px 18px rgba(0, 0, 0, .6); border: 5px solid #e8dfcf; }
.cf-attach .seal { position: absolute; right: 8%; top: 118px; width: 64px; height: auto; transform: rotate(-12deg); z-index: 3; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .6)); }
.cf-attach .xray2 { display: none; }

/* =========================================================================
   Sketchbook
   ========================================================================= */
.cf-sketchbook { position: relative; margin-top: clamp(56px, 6vw, 90px); padding: clamp(28px, 3.2vw, 46px) clamp(18px, 3vw, 46px) clamp(30px, 3.5vw, 50px); }
.cf-sketchbook::after { /* binding shadow along the top, like a sketchbook page */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(60, 40, 20, .2), transparent);
}
.cf-sketchbook > header { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 26px; }
.cf-sketchbook h2 { border: 0; padding: 0; margin: 0; font-size: clamp(15px, 1.2vw, 18px); }
.cf-sketchbook header .hand { font-size: clamp(22px, 2vw, 28px); }
.sb-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 26px; align-items: start; }
.sb-item { margin: 0; position: relative; width: 100%; justify-self: center; }
/* keep each sketch close to its real resolution */
.sb-1, .sb-3 { max-width: 300px; } .sb-2 { max-width: 290px; } .sb-4 { max-width: 340px; } .sb-5 { max-width: 460px; } .sb-6 { max-width: 540px; }
.sb-item img { display: block; width: 100%; height: auto; box-shadow: 0 10px 18px rgba(40, 25, 15, .35), 0 1px 2px rgba(40, 25, 15, .3); }
.sb-item figcaption { margin-top: 10px; font-size: 20px; line-height: 1.25; }
.sb-item .tape { left: calc(50% - 42px); top: -12px; width: 84px; }
.sb-1 { grid-column: 1 / span 3; transform: rotate(-2deg); }
.sb-2 { grid-column: 4 / span 3; transform: rotate(1.5deg); margin-top: 26px; }
.sb-3 { grid-column: 7 / span 3; transform: rotate(-1deg); }
.sb-4 { grid-column: 10 / span 3; transform: rotate(2.4deg); margin-top: 34px; }
.sb-5 { grid-column: 1 / span 4; transform: rotate(1.2deg); }
.sb-6 { grid-column: 5 / span 4; transform: rotate(-1.8deg); margin-top: 18px; }
.sb-7 { grid-column: 9 / span 4; transform: rotate(1deg); max-width: 300px; margin-top: 40px; }

/* =========================================================================
   Case notes
   ========================================================================= */
.cf-notes { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .9fr); gap: 34px; margin-top: clamp(56px, 6vw, 90px); align-items: start; }
.notebook {
  position: relative; padding: 30px 26px 30px 54px; color: var(--cf-ink); transform: rotate(-1deg);
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(90, 110, 150, .22) 31px 32px),
    linear-gradient(90deg, transparent 40px, rgba(170, 60, 60, .28) 40px 41px, transparent 41px),
    var(--paper) 0 0 / 512px, #ece3d0;
  background-position: 0 var(--rule-y, 19px), 0 0, 0 0;
  line-height: 32px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, .55), 0 2px 3px rgba(0, 0, 0, .4);
}
.notebook::before { /* spiral binding */
  content: ""; position: absolute; left: -10px; top: 18px; bottom: 18px; width: 26px;
  background: radial-gradient(circle at 13px 9px, #1a1416 4px, transparent 5px) 0 0 / 26px 26px repeat-y,
              radial-gradient(ellipse 13px 6px at 13px 9px, transparent 7px, #b7aa96 8px, #8d8270 10px, transparent 11px) 0 0 / 26px 26px repeat-y;
}
.notebook h2 { font: 500 13.5px/32px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #231a14; border: 0; padding: 0; margin: 0 0 32px; }
.notebook dl { line-height: 32px; }
.notebook dl div { padding: 0; }
.notebook dt { display: inline; font-size: 21px; color: #2b1f3a; }
.notebook dd { display: inline; font-size: 21px; color: #2b1f3a; }
.notebook dd .more { display: block; padding-left: 18px; }
.cf-notes .ink-card p { font-size: 16px; line-height: 1.55; color: #ddd6ce; }
.cf-notes .ink-card p + p { margin-top: 12px; }
.cf-observe p { font-family: var(--f-italic); font-style: italic; font-size: 19px !important; line-height: 1.45 !important; color: #e9e1d8 !important; }
.cf-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.stamp {
  display: inline-block; padding: 8px 14px; border: 2px solid rgba(201, 164, 106, .75); outline: 1px solid rgba(201, 164, 106, .4); outline-offset: 3px;
  font: 500 11px/1.4 var(--f-display); letter-spacing: .28em; text-transform: uppercase; color: var(--cf-gold-hi); text-align: center; transform: rotate(-3deg);
}
.stamp strong { display: block; font-size: 15px; letter-spacing: .3em; color: #fff4dc; }
.cf-status .moons-row { width: 120px; height: auto; transform: rotate(90deg); transform-origin: center; }

/* closing */
.cf-closing { max-width: 760px; margin: clamp(60px, 7vw, 100px) auto 0; text-align: center; }
.cf-closing .eyebrow { color: var(--cf-gold); }
.cf-closing .lines { margin-top: 18px; font-family: var(--f-italic); font-style: italic; font-size: clamp(21px, 2vw, 26px); line-height: 1.45; color: #ece5dc; }
.cf-closing .lines + .lines { margin-top: 14px; color: var(--cf-gold-hi); }
.cf-closing .sig { margin-top: 18px; font-size: 30px; color: var(--cf-lilac); }
.cf-closing .btn-row { justify-content: center; margin-top: 30px; }

/* =========================================================================
   Tablet: two columns (the stacked columns dissolve into a paired grid)
   ========================================================================= */
@media (max-width: 1199.98px) {
  .cf-col, .cf-pair { display: contents; }
  .cf-hero { grid-area: hero; } .cf-title { grid-area: title; } .cf-cluster { grid-area: clus; } .cf-details { grid-area: det; }
  .cf-profile { grid-area: prof; } .cf-physical { grid-area: phys; } .cf-sketches { grid-area: sk; } .cf-polaroids { grid-area: polr; }
  .cf-personality { grid-area: pers; } .cf-associates { grid-area: assoc; } .cf-botanical { grid-area: bot; } .cf-attach { grid-area: att; }
  .cf-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "hero  title"
      "clus  prof"
      "det   assoc"
      "phys  sk"
      "polr  pers"
      "bot   att";
    gap: 34px 26px;
  }
  .cf-hero { padding: 40px 0 140px 30px; }
  .cf-cluster .lily-note figcaption { font-size: clamp(16px, 1.9vw, 21px); }
  .cf-cluster .n-observer { font-size: clamp(15px, 1.75vw, 19px); padding: 16px 10px 12px 14px; }
  .cf-moons { right: -14px; }
  .cf-sketches .sk-row img { height: clamp(190px, 22vw, 240px); }
  .cf-polaroids { min-height: 470px; max-width: 440px; width: 100%; justify-self: center; }
  .sb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sb-1 { grid-column: 1 / span 2; } .sb-2 { grid-column: 3 / span 2; } .sb-3 { grid-column: 5 / span 2; }
  .sb-4 { grid-column: 1 / span 2; margin-top: 0; } .sb-5 { grid-column: 3 / span 4; }
  .sb-6 { grid-column: 1 / span 3; margin-top: 0; } .sb-7 { grid-column: 4 / span 3; }
  .cf-notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .notebook { grid-column: 1 / -1; max-width: 620px; justify-self: center; width: 100%; }
}

@media (max-width: 1080px) {
  .cf-details ul { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 16px; }
  .cf-details li { grid-column: span 2; }
  .cf-details li:nth-child(-n+2) { grid-column: span 3; }
}

/* =========================================================================
   Phone: one column
   ========================================================================= */
@media (max-width: 759.98px) {
  .cf-board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "title" "prof" "clus" "det" "phys" "sk" "pers" "polr" "assoc" "bot" "att";
    gap: 34px;
  }
  .cf-hero { padding: 36px 0 126px 14px; max-width: 460px; width: 100%; justify-self: center; }
  .cf-hero .n-unseen { width: 128px; font-size: 18px; left: -4px; padding: 12px 12px 14px; }
  .cf-hero .n-evidence { width: 150px; font-size: 17px; left: -8px; top: 52%; }
  .cf-hero .prints { width: 96px; bottom: 84px; }
  .cf-title { padding: 30px 22px; transform: none; }
  .cf-moons { display: none; }
  .cf-facts div { grid-template-columns: 96px minmax(0, 1fr); }
  .cf-profile, .cf-physical, .cf-sketches { transform: none; }
  /* the pinned cluster becomes a small grid of prints */
  .cf-cluster { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "sk lily" "prof side" "obs obs"; gap: 28px 18px; align-items: start; }
  .cf-cluster .p-sketch, .cf-cluster .lily-note, .cf-cluster .p-side, .cf-cluster .p-profile, .cf-cluster .n-observer { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .cf-cluster .p-sketch { grid-area: sk; }
  .cf-cluster .lily-note { grid-area: lily; }
  .cf-cluster .p-profile { grid-area: prof; }
  .cf-cluster .p-side { grid-area: side; }
  .cf-cluster .n-observer { grid-area: obs; justify-self: center; width: 150px; font-size: 18px; }
  .cf-cluster .xray { display: none; }
  .cf-details img { height: 104px; }
  .cf-cluster .lily-note figcaption { font-size: 18px; }
  .cf-sketches .sk-row img { height: 200px; }
  .cf-polaroids { max-width: 400px; }
  .cf-attach { min-height: 300px; max-width: 420px; width: 100%; justify-self: center; }
  .cf-botanical .bot-art { height: 250px; }
  .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .sb-grid .sb-item { grid-column: auto; margin-top: 0; }
  .sb-5 { grid-column: 1 / -1 !important; }
  .cf-notes { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .notebook { padding-left: 46px; transform: rotate(-.6deg); }
}
@media (max-width: 420px) {
  .cf-details img { height: 92px; }
  .cf-sketches .sk-row img { height: 170px; }
}

/* hover: prints lift slightly */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .print, .polaroid, .sb-item { transition: transform .35s ease, filter .35s ease; }
  .polaroid:hover, .sb-item:hover { filter: brightness(1.04); }
}

/* =========================================================================
   Character files: shared template (Tessa, Cal, Evelyn, Preston)
   Same paper, tape, ink and handwriting as File 001, arranged in three
   hand-stacked columns on desktop.
   ========================================================================= */
.fb { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 34fr) minmax(0, 30fr); gap: 30px 30px; align-items: start; }
.fb-col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.fb-col-a { grid-column: 1; grid-row: 1; }
.fb-col-b { grid-column: 2; grid-row: 1; }
.fb-col-c { grid-column: 3; grid-row: 1; }

/* hero print with pinned notes */
.fb-hero { position: relative; padding: 38px 0 0 30px; }
.fb-hero .print { transform: rotate(-1.4deg); z-index: 2; }
.fb-hero .print .tape { left: calc(50% - 46px); top: -12px; transform: rotate(-3deg); }
.fb-hero .print img { aspect-ratio: auto; }
.fb-hero .n1 { left: -8px; top: 0; width: 158px; transform: rotate(-4deg); font-size: 20px; line-height: 1.22; z-index: 3; }
.fb-hero .n1 .clip { left: 18px; top: -26px; transform: rotate(8deg); }
.fb-hero .n2 { right: -16px; bottom: -34px; width: 196px; transform: rotate(3deg); font-size: 19px; z-index: 3; }
.fb-hero .n2 .tape { left: 50px; top: -12px; width: 80px; transform: rotate(-6deg); }
.print.framed { background: #ece3d2; padding: 8px; }

/* polaroids */
.fb-polaroids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; margin-top: 26px; padding: 0 4px; }
.fb-polaroids.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
.fb-polaroids .polaroid:nth-child(odd) { transform: rotate(-3deg); }
.fb-polaroids .polaroid:nth-child(even) { transform: rotate(2.6deg); margin-top: 26px; }
.fb-polaroids .polaroid .tape { left: calc(50% - 40px); top: -12px; width: 80px; transform: rotate(-4deg); }
.fb-polaroids.n3 .polaroid figcaption { font-size: 15px; min-height: 40px; }
.fb-polaroids img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 25%; }

/* title card */
.fb-title { padding: 34px 30px; transform: rotate(.5deg); }
.fb-title .tape.t1 { left: 44%; top: -11px; transform: rotate(-2deg); }
.fb-title .cf-quote { padding-right: 0; }
.fb-title .motto { margin-top: 14px; font: 500 10.5px/1.7 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--cf-ink-2); }

/* profile */
.fb-profile { padding: 28px 28px 30px; transform: rotate(-.4deg); }
.fb-profile p { font-size: 16.5px; line-height: 1.58; color: var(--cf-ink); }
.fb-profile p + p { margin-top: 12px; }
.fb-profile .tape { left: 18px; top: -10px; transform: rotate(-8deg); width: 74px; }
.fb-profile .short { font-family: var(--cf-hand-font); font-size: 22px; line-height: 1.32; color: var(--cf-hand); }

/* personality, associates, professional notes (ink cards) */
.fb-assoc h3 { font: 500 12px/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--cf-lilac); }
.fb-assoc h3 a { color: inherit; border-bottom: 1px solid rgba(201, 164, 106, .35); transition: color .25s, border-color .25s; }
.fb-assoc h3 a:hover { color: #fff; border-color: var(--cf-gold-hi); }
.fb-assoc h3 + p { margin-top: 4px; font-size: 16px; line-height: 1.5; color: #ddd6ce; }
.fb-assoc p + h3 { margin-top: 18px; }
.ink-card .plain-list li { position: relative; padding: 4px 0 4px 20px; font-size: 16px; line-height: 1.42; color: #e2dbd3; }
.ink-card .plain-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; background: var(--cf-gold); transform: rotate(45deg); }

/* physical description */
.fb-physical { padding: 26px 22px 26px; transform: rotate(.6deg); }
.fb-physical dl div { padding: 8px 0; border-bottom: 1px solid rgba(42, 31, 24, .16); }
.fb-physical dl div:last-child { border-bottom: 0; }
.fb-physical dt { font: 500 10.5px/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--cf-plum); }
.fb-physical dd { margin-top: 2px; font-size: 15.5px; line-height: 1.4; }
.fb-physical .clip { right: 26px; top: -20px; transform: rotate(10deg); }

/* details strip */
.fb-details ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 12px; }
.fb-details li.wide { grid-column: 1 / -1; }
.fb-details figure { margin: 0; }
.fb-details img { display: block; width: 100%; height: 104px; object-fit: cover; border: 1px solid rgba(236, 211, 165, .35); box-shadow: 0 6px 12px rgba(0, 0, 0, .55); }
.fb-details li.wide img { height: auto; }
.fb-details figcaption { margin-top: 8px; font: 400 9.5px/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #cfc6bd; }
.fb-details figcaption.hand { font: 400 17px/1.25 var(--cf-hand-font); letter-spacing: 0; text-transform: none; color: var(--cf-gold-hi); }

/* attached props (photos and prints from the character's board) */
.fb-attach { position: relative; min-height: 262px; margin: 4px 0 6px; }
.fb-attach .label { position: absolute; left: 4px; top: 0; font: 500 11px/1.3 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.fb-attach .att { position: absolute; height: auto; border: 5px solid #e8dfcf; box-shadow: 0 12px 20px rgba(0, 0, 0, .6), 0 2px 3px rgba(0, 0, 0, .45); }
.fb-attach.n3 .a1 { left: 3%; top: 34px; width: min(34%, 160px); transform: rotate(-4deg); z-index: 1; }
.fb-attach.n3 .a2 { left: 34%; top: 66px; width: min(34%, 160px); transform: rotate(3deg); z-index: 2; }
.fb-attach.n3 .a3 { right: 4%; top: 30px; width: min(24%, 116px); transform: rotate(-2deg); z-index: 1; }
.fb-attach.n2 .a1 { left: 5%; top: 34px; width: min(40%, 180px); transform: rotate(-3deg); z-index: 1; }
.fb-attach.n2 .a2 { right: 6%; top: 70px; width: min(38%, 170px); transform: rotate(4deg); z-index: 2; }

/* pinned quote */
.fb-quote { position: relative; padding: 22px 22px 24px; transform: rotate(-1.6deg); font-size: 22px; line-height: 1.28; }
.fb-quote .tape { left: calc(50% - 40px); top: -12px; width: 80px; transform: rotate(3deg); }
.fb-quote .by { display: block; margin-top: 6px; font-size: 18px; text-align: right; }

/* sketchbook (auto layout): loose columns, like prints dropped into a sketchbook */
.sb-grid.sb-auto { display: block; column-count: 4; column-gap: 30px; }
.sb-auto.c5 { column-count: 5; } .sb-auto.c3 { column-count: 3; } .sb-auto.c2 { column-count: 2; } .sb-auto.c1 { column-count: 1; }
/* padding keeps each piece of tape inside its own sketch when the columns break */
.sb-auto .sb-item { display: block; width: fit-content; max-width: min(100%, 300px); margin: 0 auto 26px; padding-top: 14px; break-inside: avoid; }
.sb-auto .sb-item img { width: auto; max-width: 100%; }
.sb-auto .sb-item figcaption { width: 0; min-width: 100%; } /* the caption wraps to the sketch's width */
.sb-auto .sb-item .tape { top: 2px; }
.sb-auto .sb-item:nth-child(4n+1) { transform: rotate(-1.8deg); }
.sb-auto .sb-item:nth-child(4n+2) { transform: rotate(1.4deg); margin-top: 22px; }
.sb-auto .sb-item:nth-child(4n+3) { transform: rotate(-.8deg); }
.sb-auto .sb-item:nth-child(4n) { transform: rotate(2deg); margin-top: 30px; }
.sb-auto .sb-item.small { max-width: 220px; }

/* scenes: case photos, at-home sketches */
.fb-scenes { margin-top: clamp(56px, 6vw, 90px); }
.fb-scenes > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 26px; }
.fb-scenes h2 { font: 500 clamp(15px, 1.2vw, 18px)/1.3 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: var(--cf-lilac); }
.fb-scenes header .hand { font-size: clamp(22px, 2vw, 28px); color: var(--cf-gold-hi); }
.scene-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 34px 28px; }
.scene { position: relative; margin: 0; flex: 1 1 228px; max-width: 330px; }
.scene .frame-p { position: relative; background: #ece3d2; padding: 8px 8px 0; box-shadow: 0 14px 24px rgba(0, 0, 0, .6), 0 2px 3px rgba(0, 0, 0, .45); }
.scene img { display: block; width: 100%; height: auto; }
.scene .tape { left: calc(50% - 42px); top: -12px; width: 84px; transform: rotate(-3deg); }
.scene figcaption { padding: 10px 6px 12px; text-align: center; }
.scene .label { display: block; font: 500 9.5px/1.4 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: #6a5a48; }
.scene .hand { display: block; margin-top: 4px; font-size: 18px; color: #3a2a4a; }
.scene:nth-child(3n+1) { transform: rotate(-1.4deg); }
.scene:nth-child(3n+2) { transform: rotate(1deg); margin-top: 24px; }
.scene:nth-child(3n) { transform: rotate(-.6deg); }

/* notebook checklist + plain list */
.notebook ul.checks, .notebook ul.lines { line-height: 32px; }
.notebook ul.checks li, .notebook ul.lines li { font-size: 21px; color: #2b1f3a; }
.notebook ul.lines li { padding-left: 18px; text-indent: -18px; }
.notebook ul.checks li::before { content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 12px 0 2px; border: 1.6px solid currentColor; border-radius: 2px; transform: translateY(1px) rotate(-4deg); }
.notebook ul.lines li::before { content: "\2022"; margin-right: 10px; }
.notebook .sign { margin-top: 0; font-size: 22px; color: #3a2a4a; text-align: right; }

/* next / previous file */
.fb-next { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid rgba(201, 164, 106, .22); }
.fb-next a { display: inline-flex; flex-direction: column; gap: 4px; color: var(--gold-hi); }
.fb-next .k { font: 400 10px/1.4 var(--f-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.fb-next .n { font: 400 15px/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; transition: color .25s; }
.fb-next a:hover .n { color: #fff; }
.fb-next .prev { justify-self: start; }
.fb-next .all { justify-self: center; }
.fb-next .next { justify-self: end; text-align: right; }

/* tablet */
@media (max-width: 1199.98px) {
  .fb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px 28px; }
  .fb-col-c { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 28px; align-items: start; }
  .fb-hero { padding: 38px 0 0 24px; }
  .sb-grid.sb-auto, .sb-auto.c4, .sb-auto.c5 { column-count: 3; }
}
/* phone */
@media (max-width: 759.98px) {
  .fb { display: flex; flex-direction: column; align-items: stretch; gap: 34px; }
  .fb-col, .fb-col-c { display: contents; }
  .fb-hero { order: 1; padding: 34px 0 0 14px; max-width: 460px; width: 100%; align-self: center; }
  .fb-title { order: 2; padding: 30px 22px; transform: none; }
  .fb-profile { order: 3; transform: none; }
  .fb-personality { order: 4; }
  .fb-physical { order: 5; transform: none; }
  .fb-details { order: 6; }
  .fb-polaroids { order: 7; max-width: 440px; width: 100%; align-self: center; }
  .fb-attach { order: 8; width: 100%; max-width: 420px; align-self: center; }
  .fb-assoc { order: 9; }
  .fb-quote { order: 10; max-width: 380px; align-self: center; }
  .sb-grid.sb-auto, .sb-auto.c3, .sb-auto.c4, .sb-auto.c5 { column-count: 2; column-gap: 18px; }
  .sb-auto .sb-item { margin-bottom: 28px; }
  .fb-hero .n1 { width: 132px; font-size: 18px; left: -6px; padding: 12px 12px 14px; }
  .fb-hero .n2 { width: 168px; font-size: 17px; right: -6px; bottom: -28px; }
  .fb-polaroids.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene:nth-child(3n+2) { margin-top: 0; }
  .scene-grid { gap: 26px 14px; }
  .scene { flex: 0 1 calc(50% - 7px); }
  .scene .frame-p { padding: 6px 6px 0; }
  .scene figcaption { padding: 8px 4px 10px; }
  .scene .hand { font-size: 15px; }
  .scene .label { font-size: 8.5px; letter-spacing: .18em; }
  .sb-auto .sb-item:nth-child(4n+2), .sb-auto .sb-item:nth-child(4n) { margin-top: 0; }
  .fb-next { grid-template-columns: 1fr 1fr; }
  .fb-next .all { grid-column: 1 / -1; grid-row: 2; }
}

/* =========================================================================
   Image viewer (opens when a sketch or photo is tapped)
   ========================================================================= */
img[data-zoom] { cursor: zoom-in; }
img[data-zoom]:focus-visible { outline: 2px solid var(--cf-gold-hi); outline-offset: 3px; }
.viewer { max-width: min(94vw, 1100px); max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.viewer::backdrop { background: rgba(6, 4, 6, .9); }
.viewer figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.viewer img { display: block; max-width: min(94vw, 1100px); max-height: calc(94vh - 60px); width: auto; height: auto; cursor: zoom-out;
  border: 8px solid #ece3d2; box-shadow: 0 24px 60px rgba(0, 0, 0, .7); }
.viewer figcaption { font-size: 22px; line-height: 1.3; color: var(--cf-gold-hi); text-align: center; }
.viewer figcaption:empty { display: none; }
.viewer-close { position: fixed; top: 14px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(201, 164, 106, .45);
  border-radius: 50%; background: rgba(10, 8, 9, .8); color: var(--cf-gold-hi); cursor: pointer; }
.viewer-close svg { width: 18px; height: 18px; }
.viewer-close:hover { border-color: var(--cf-gold-hi); color: #fff; }