/*
  Deeper: the chapter worlds. Shared by the landing and chapter.html.
  Units: --u is the type unit of a chapter screen, --fu is a hundredth of a window's width.
*/

/* World defaults */
.world {
  --f-display: "Literata", Georgia, serif;
  --dw: 400; --ds: normal;
  --f-text: "Literata", Georgia, serif;
  --tw: 400; --ts: normal;
  --tf: 1; --nf: 1; --tt: none;
  --nc: var(--ink);
  --acc: var(--ink);
  --tex: none;
  --lift: none;
  color: var(--ink);
}

/* The Art of the Box: kraft card, stencil */
.w-box {
  --bg: #b5875a; --ink: #17110b; --acc: #f1e4c6;
  --f-display: "Saira Stencil One", Impact, sans-serif;
  --f-text: "Courier Prime", "Courier New", monospace;
  --tf: .96;
  --tex:
    radial-gradient(circle at 30% 40%, rgba(255, 238, 205, .16) 0 1px, transparent 1.6px) 0 0 / 9px 11px,
    radial-gradient(circle at 70% 60%, rgba(70, 38, 8, .16) 0 1px, transparent 1.5px) 0 0 / 7px 6px,
    repeating-linear-gradient(97deg, rgba(80, 45, 12, .07) 0 2px, transparent 2px 11px),
    linear-gradient(165deg, #c4976a, #ab7d4e 62%, #9d7043);
}

/* Smoking Kills: black, gold, resin */
.w-smoke {
  --bg: #0f0d0b; --ink: #efe4cc; --acc: #d2a64a;
  --f-display: "Bodoni Moda", "Didot", serif; --dw: 700;
  --f-text: "Bodoni Moda", "Didot", serif; --ts: italic;
  --tf: 1.02;
  --tex:
    radial-gradient(ellipse 60% 50% at 24% 22%, rgba(120, 88, 40, .28), transparent 70%),
    radial-gradient(ellipse 70% 60% at 80% 90%, rgba(70, 50, 24, .3), transparent 70%),
    linear-gradient(#0f0d0b, #0b0a08);
}

/* 30 Pieces of Silver: brushed metal, inscription capitals */
.w-silver {
  --bg: #b9bec5; --ink: #14171c; --acc: #4c535d;
  --f-display: "Cinzel", "Trajan Pro", serif; --dw: 700;
  --f-text: "Literata", Georgia, serif; --ts: italic;
  --tf: .82; --nf: .9;
  --tex:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .09) 0 1px, rgba(0, 0, 0, .035) 1px 2px, transparent 2px 3px),
    linear-gradient(112deg, #dadee3 0%, #a9afb7 36%, #e7eaed 51%, #9ca3ac 73%, #cbd0d5 100%);
}

/* Life Finds a Way: concrete and green */
.w-life {
  --bg: #a8a59d; --ink: #16281a; --acc: #3d7d33;
  --f-display: "Fraunces", Georgia, serif; --dw: 700;
  --f-text: "Fraunces", Georgia, serif; --ts: italic;
  --tf: 1; --nc: #2f6e2a;
  --tex:
    radial-gradient(circle at 20% 30%, rgba(40, 38, 34, .18) 0 1px, transparent 1.6px) 0 0 / 6px 7px,
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .22) 0 1px, transparent 1.7px) 0 0 / 11px 9px,
    radial-gradient(ellipse 40% 30% at 75% 20%, rgba(80, 76, 68, .16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(180deg, #aeaba3, #a19e96);
}

/* What Is Art?: gallery wall */
.w-what {
  --bg: #f3f1ec; --ink: #0d0d0d; --acc: #0d0d0d;
  --f-display: "Syne", "Helvetica Neue", sans-serif; --dw: 800;
  --f-text: "Literata", Georgia, serif;
  --tf: .9; --nf: 1;
  --tex:
    radial-gradient(ellipse 60% 40% at 70% 40%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(180deg, #f5f3ef 0 84%, #e4e0d8 100%);
}

/* Reflecting on Art: a mirror */
.w-mirror {
  --bg: #aebcc5; --ink: #0e1a22; --acc: #0e1a22;
  --f-display: "Italiana", "Didot", serif;
  --f-text: "Literata", Georgia, serif; --ts: italic;
  --tf: 1.12; --nf: 1.05;
  --tex:
    linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, .34) 30%, transparent 38%, transparent 62%, rgba(255, 255, 255, .2) 66%, transparent 71%),
    linear-gradient(155deg, #d9e2e7 0%, #9fb0bb 34%, #e8eef1 48%, #90a3af 70%, #c4d0d7 100%);
}

/* Life in Polaroids: asphalt, white borders, marker */
.w-polaroid {
  --bg: #24221e; --ink: #f2eee4; --acc: #f6f3ec;
  --f-display: "Nanum Pen Script", "Comic Sans MS", cursive;
  --f-text: "Courier Prime", "Courier New", monospace;
  --tf: 1.5; --nf: 1.3; --nc: #ecd773;
  --tex:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .09) 0 1px, transparent 1.5px) 0 0 / 5px 6px,
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .5) 0 1.2px, transparent 1.8px) 0 0 / 8px 7px,
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(255, 255, 255, .06), transparent 70%),
    linear-gradient(#26241f, #1f1d1a);
}

/* Movies I've Missed: red velvet, marquee */
.w-movies {
  --bg: #86191b; --ink: #f7ead0; --acc: #f2b33d;
  --f-display: "League Gothic", "Impact", sans-serif; --tt: uppercase;
  --f-text: "Literata", Georgia, serif; --ts: italic;
  --tf: 1.42; --nf: 1.2; --nc: #f2b33d;
  --tex:
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(20, 0, 0, .45)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .24) 0, rgba(255, 255, 255, .05) 22px, rgba(0, 0, 0, .24) 46px),
    linear-gradient(#8d1c1e, #7a1517);
}

/* Every Brick Has a Tale to Tell: a wall */
.w-brick {
  --bg: #94442f; --ink: #f7ead8; --acc: #f3e9a0;
  --f-display: "Alfa Slab One", Rockwell, serif;
  --f-text: "Literata", Georgia, serif;
  --tf: .84; --nf: .95; --nc: #f3e9a0;
  --tex:
    radial-gradient(ellipse 70% 60% at 40% 50%, rgba(40, 10, 0, .38), transparent 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56'%3E%3Crect width='120' height='56' fill='%23ae977b'/%3E%3Crect x='1' y='1.5' width='58' height='25' fill='%2394442f'/%3E%3Crect x='61' y='1.5' width='58' height='25' fill='%238a3e2a'/%3E%3Crect x='-29' y='29.5' width='58' height='25' fill='%239d4a33'/%3E%3Crect x='31' y='29.5' width='58' height='25' fill='%2387402c'/%3E%3Crect x='91' y='29.5' width='58' height='25' fill='%239d4a33'/%3E%3C/svg%3E") 0 0 / calc(var(--mu, var(--u, 12px)) * 7.6) calc(var(--mu, var(--u, 12px)) * 3.55);
}

/* Free Art: hi-vis yellow */
.w-free {
  --bg: #ffd60a; --ink: #111111; --acc: #111111;
  --f-display: "Bungee", Impact, sans-serif;
  --f-text: "Courier Prime", "Courier New", monospace;
  --tf: .74; --nf: .9;
  --tex:
    radial-gradient(circle, rgba(0, 0, 0, .07) 0 1.3px, transparent 1.8px) 0 0 / 13px 13px,
    linear-gradient(160deg, #ffdc2e, #ffcf00);
}

/* General worlds, for chapters added later */
.w-g1 { --bg: #1d3b4c; --ink: #f2ead9; --f-display: "Bodoni Moda", serif; --dw: 700; --nc: #d9c48f;
  --tex: radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255, 255, 255, .08), transparent 70%), linear-gradient(#1f3f51, #193342); }
.w-g2 { --bg: #e9dfcf; --ink: #2a1f19; --f-display: "Cinzel", serif; --dw: 700; --tf: .84;
  --tex: radial-gradient(ellipse 60% 50% at 70% 30%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(#ece3d4, #e0d5c2); }
.w-g3 { --bg: #4d2a7a; --ink: #f5edff; --f-display: "Syne", sans-serif; --dw: 800; --tf: .9;
  --tex: radial-gradient(ellipse 60% 50% at 25% 25%, rgba(255, 255, 255, .1), transparent 70%), linear-gradient(#552f86, #43246b); }
.w-g4 { --bg: #0f5a48; --ink: #f1eedf; --f-display: "Fraunces", serif; --dw: 700; --f-text: "Fraunces", serif; --ts: italic;
  --tex: radial-gradient(ellipse 60% 50% at 70% 25%, rgba(255, 255, 255, .09), transparent 70%), linear-gradient(#11624f, #0c4d3d); }
.w-g5 { --bg: #ff6a3d; --ink: #1a1310; --f-display: "League Gothic", sans-serif; --tt: uppercase; --tf: 1.42; --nf: 1.2; --f-text: "Courier Prime", monospace;
  --tex: radial-gradient(ellipse 60% 50% at 30% 30%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(#ff7246, #f45d30); }
.w-g6 { --bg: #c5d5e6; --ink: #10233a; --f-display: "Alfa Slab One", serif; --tf: .84;
  --tex: radial-gradient(ellipse 60% 50% at 70% 30%, rgba(255, 255, 255, .4), transparent 70%), linear-gradient(#cad9e9, #b9cbdf); }
.w-g7 { --bg: #2b2b2d; --ink: #efefef; --f-display: "Saira Stencil One", sans-serif; --f-text: "Courier Prime", monospace; --tf: .96;
  --tex: radial-gradient(ellipse 60% 50% at 30% 30%, rgba(255, 255, 255, .07), transparent 70%), linear-gradient(#2e2e30, #252527); }
.w-g8 { --bg: #f1c4cd; --ink: #3b0d19; --f-display: "Italiana", serif; --tf: 1.12; --ts: italic;
  --tex: radial-gradient(ellipse 60% 50% at 70% 30%, rgba(255, 255, 255, .35), transparent 70%), linear-gradient(#f4cad2, #ebb8c3); }

/* Words on a chapter screen */
.pl-no {
  margin: 0;
  font-family: var(--f-display); font-weight: var(--dw); font-style: var(--ds);
  font-size: calc(var(--u) * 9.4 * var(--nf) * var(--fit, 1));
  line-height: .8; letter-spacing: -.02em;
  color: var(--nc);
  font-variant-numeric: lining-nums;
}
.pl-kind {
  margin: 0;
  font: 600 max(12px, calc(var(--u) * .86))/1.2 "Martian Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .16em;
}
.pl-title {
  margin: 0;
  font-family: var(--f-display); font-weight: var(--dw); font-style: var(--ds);
  font-size: calc(var(--u) * 5.3 * var(--tf) * var(--fit, 1));
  line-height: .98; letter-spacing: -.01em;
  text-transform: var(--tt);
  text-wrap: balance; overflow-wrap: break-word;
}
.pl-tag {
  margin: 0; max-width: 32em;
  font-family: var(--f-text); font-weight: var(--tw); font-style: var(--ts);
  font-size: max(16px, calc(var(--u) * 1.36)); line-height: 1.38;
}
.pl-in {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 44px; padding: .62em 1.15em .62em 1.25em;
  font: 600 max(13px, calc(var(--u) * .88))/1 "Martian Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .12em; text-decoration: none;
  color: var(--bg); background: var(--ink); border-radius: 999px;
}
.pl-in svg { width: 1.25em; height: 1.25em; flex: none; }
.pl-in:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* World touches on the words */
.w-box .pl-kind { border: 2px solid var(--ink); padding: .35em .6em .3em; }
.w-box .pl-in { border-radius: 2px; color: #f1e4c6; }
.w-smoke .pl-no {
  background: linear-gradient(172deg, #f8e9b4 8%, #d4a441 42%, #8c5f17 56%, #f0d68e 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.w-smoke .pl-kind { color: #d2a64a; }
.w-smoke .pl-in { background: transparent; color: #e4c068; box-shadow: inset 0 0 0 1px #c9952f; }
.w-silver .pl-no, .w-silver .pl-title { text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .18); }
.w-life .pl-no { font-style: italic; font-weight: 400; }
.w-what .pl-no { color: transparent; -webkit-text-stroke: max(1.5px, calc(var(--u) * .12)) var(--ink); font-weight: 500; }
.w-what .pl-in { border-radius: 0; }
.w-mirror .pl-echo {
  margin: calc(var(--u) * -.5) 0 0;
  font-family: var(--f-display);
  font-size: calc(var(--u) * 5.3 * var(--tf) * var(--fit, 1) * .62);
  line-height: 1; transform: scaleX(-1); transform-origin: 50% 50%;
  opacity: .34; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%;
}
.w-polaroid .pl-in { background: #f6f3ec; color: #24221e; border-radius: 3px; }
.w-movies .pl-kind { color: #f2b33d; }
.w-movies .pl-in { background: #f2b33d; color: #2a0607; }
.w-brick .pl-no, .w-brick .pl-title, .w-brick .pl-tag { text-shadow: 0 2px 0 rgba(40, 10, 0, .45), 0 0 18px rgba(40, 10, 0, .5); }
.w-brick .pl-in { background: #f7ead8; color: #5a2214; }
.w-free .pl-in { border-radius: 6px; }

/* Window surrounds. The window itself is filled by the next chapter, drawn above. */
.pl-frame::before, .pl-frame::after { content: ""; position: absolute; }
.pl-frame::after { pointer-events: none; }
.fr-a, .fr-b { position: absolute; pointer-events: none; }

.w-box .pl-frame::before {
  inset: calc(var(--fu) * -2.4);
  background: repeating-linear-gradient(90deg, #7a532e 0 calc(var(--fu) * .45), #cfa475 calc(var(--fu) * .45) calc(var(--fu) * 1.25));
  box-shadow: 0 0 0 calc(var(--fu) * .5) #5a3b1c, 0 calc(var(--fu) * 1.2) calc(var(--fu) * 3) rgba(45, 24, 4, .4);
}
.w-box .fr-a {
  left: 22%; top: calc(var(--fu) * -5.6); width: calc(var(--fu) * 22); height: calc(var(--fu) * 4.6);
  background: linear-gradient(180deg, rgba(246, 236, 210, .86), rgba(226, 212, 180, .8));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18); transform: rotate(-3deg);
}
.w-box .fr-b {
  right: 14%; bottom: calc(var(--fu) * -5.4); width: calc(var(--fu) * 18); height: calc(var(--fu) * 4.4);
  background: linear-gradient(180deg, rgba(246, 236, 210, .84), rgba(226, 212, 180, .78));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18); transform: rotate(4deg);
}

.w-smoke .pl-frame::before {
  inset: calc(var(--fu) * -3); border-radius: calc(var(--fu) * 1.4);
  background: linear-gradient(140deg, rgba(255, 246, 220, .34), rgba(255, 246, 220, .06) 35%, rgba(255, 246, 220, .02) 60%, rgba(255, 246, 220, .24));
  box-shadow: inset 0 0 0 1px rgba(255, 240, 210, .35), 0 calc(var(--fu) * 2.2) calc(var(--fu) * 6) rgba(0, 0, 0, .7);
}
.w-smoke .pl-frame::after { inset: calc(var(--fu) * -.9); border: max(1px, calc(var(--fu) * .25)) solid #c9952f; }

.w-silver .pl-frame::before {
  inset: calc(var(--fu) * -2.8); background: #2d3138;
  border: calc(var(--fu) * 2.3) solid; border-color: #f4f6f8 #7c838c #6a7179 #fbfcfd;
  box-shadow: 0 0 0 1px rgba(20, 23, 28, .45), 0 calc(var(--fu) * 1) calc(var(--fu) * 2.4) rgba(20, 23, 28, .3);
}

.w-life .pl-frame::before {
  inset: calc(var(--fu) * -1.7); border-radius: calc(var(--fu) * .7);
  background: #4f4c46;
  box-shadow: 0 0 0 calc(var(--fu) * .7) #8d8a83, 0 calc(var(--fu) * .8) calc(var(--fu) * 2) rgba(30, 28, 24, .35);
}
.w-life .fr-a { left: calc(var(--fu) * -40); top: calc(100% - var(--fu) * 2); width: calc(var(--fu) * 44); height: calc(var(--fu) * 30); overflow: visible; }
.w-life .fr-a path.crack { fill: none; stroke: #3b3934; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.w-life .fr-a path.leaf { fill: #4c8a3a; }
.w-life .fr-a path.stem { fill: none; stroke: #3d7d33; stroke-width: 1.3; stroke-linecap: round; }

.w-what .pl-frame::before {
  inset: calc(var(--fu) * -9); background: #fbfaf6;
  box-shadow: 0 0 0 calc(var(--fu) * 1.6) #141414, 0 calc(var(--fu) * 2.6) calc(var(--fu) * 5) calc(var(--fu) * 1.6) rgba(0, 0, 0, .2);
}
.w-what .pl-frame::after { inset: calc(var(--fu) * -.7); box-shadow: inset 0 0 0 calc(var(--fu) * .7) #ddd8cd; }
.w-what .fr-b {
  left: calc(var(--fu) * -10.6); top: calc(100% + var(--fu) * 15);
  min-width: calc(var(--u) * 12); max-width: calc(var(--u) * 22);
  padding: calc(var(--u) * .55) calc(var(--u) * .8);
  background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  font: 500 calc(var(--u) * .78)/1.3 "Syne", sans-serif;
}
.w-what .fr-b b { display: block; font-weight: 800; font-size: 1.25em; }

.w-mirror .pl-frame::before {
  inset: calc(var(--fu) * -2.4); border-radius: calc(var(--fu) * .8);
  background: linear-gradient(135deg, #fbfdfe, #8ea1ac 30%, #e7eef1 52%, #7d909c 78%, #dfe7eb);
  box-shadow: 0 calc(var(--fu) * 1.4) calc(var(--fu) * 3.4) rgba(14, 26, 34, .4);
}

.w-polaroid .pl-frame::before {
  top: calc(var(--fu) * -5); left: calc(var(--fu) * -5); right: calc(var(--fu) * -5); bottom: calc(var(--fu) * -26);
  background: linear-gradient(170deg, #faf8f2, #ebe7dc);
  box-shadow: 0 calc(var(--fu) * 1.6) calc(var(--fu) * 4.6) rgba(0, 0, 0, .6);
}
.w-polaroid .fr-b {
  left: 0; right: 0; top: calc(100% + var(--fu) * 4); height: calc(var(--fu) * 20);
  display: flex; align-items: center; padding: 0 calc(var(--fu) * 1.5);
  font: 400 calc(var(--fu) * 11)/1 "Nanum Pen Script", cursive; color: #26231d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.w-movies .pl-frame::before {
  inset: calc(var(--fu) * -2.8); background: #0a0a0a;
  box-shadow: 0 0 calc(var(--fu) * 8) rgba(255, 232, 180, .34), 0 0 0 calc(var(--fu) * .4) #3a0b0c;
}
.w-movies .fr-a {
  left: calc(var(--fu) * -2.8); right: calc(var(--fu) * -2.8); top: calc(var(--fu) * -8.6); height: calc(var(--fu) * 4.6);
  border-radius: calc(var(--fu) * 1);
  background: radial-gradient(circle, #fff6cf 0 20%, #f2b33d 28% 36%, transparent 42%) 0 50% / calc(var(--fu) * 4.8) 100% repeat-x, #2a0707;
  box-shadow: 0 0 calc(var(--fu) * 4) rgba(242, 179, 61, .35);
}

.w-brick .pl-frame::before {
  inset: calc(var(--fu) * -1.8); background: #2e120b;
  box-shadow: 0 0 0 calc(var(--fu) * .8) #ae977b, inset 0 0 calc(var(--fu) * 2) #000;
}

.w-free .pl-frame::before {
  inset: calc(var(--fu) * -3.4); border-radius: calc(var(--fu) * 3); background: #fffdf7;
  box-shadow: 0 calc(var(--fu) * .8) calc(var(--fu) * 2) rgba(0, 0, 0, .3);
}

.w-g1 .pl-frame::before, .w-g4 .pl-frame::before, .w-g8 .pl-frame::before { inset: calc(var(--fu) * -3.4); border: max(1px, calc(var(--fu) * .45)) solid var(--ink); }
.w-g1 .pl-frame::after, .w-g4 .pl-frame::after, .w-g8 .pl-frame::after { inset: calc(var(--fu) * -1.5); border: max(1px, calc(var(--fu) * .25)) solid var(--ink); }
.w-g2 .pl-frame::before, .w-g6 .pl-frame::before {
  inset: calc(var(--fu) * -7); background: #fbf8f1;
  box-shadow: 0 0 0 calc(var(--fu) * 1.2) var(--ink), 0 calc(var(--fu) * 1.6) calc(var(--fu) * 4) rgba(0, 0, 0, .25);
}
.w-g3 .pl-frame::before, .w-g5 .pl-frame::before, .w-g7 .pl-frame::before {
  inset: calc(var(--fu) * -2.6); background: var(--ink);
  box-shadow: 0 calc(var(--fu) * 1.4) calc(var(--fu) * 3.6) rgba(0, 0, 0, .35);
}

/* A window's own fill when the chapter has no picture: a card lettered from its data */
.pl-shot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-card {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--tex); background-color: var(--bg); color: var(--ink);
  box-shadow: inset 0 0 calc(var(--fu) * 6) rgba(0, 0, 0, .28);
}
.pl-card-in {
  max-width: 84%; padding: calc(var(--fu) * 4) calc(var(--fu) * 6);
  font-family: var(--f-display); font-weight: var(--dw); font-style: var(--ds);
  font-size: calc(var(--fu) * 11 * var(--tf)); line-height: 1.02;
  text-transform: var(--tt); text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
/* Free Art: a hand-lettered sticker, slapped on slightly crooked */
.w-free .pl-card { background-color: #ffcf00; }
.w-free .pl-card-in {
  padding: calc(var(--fu) * 4) calc(var(--fu) * 8) calc(var(--fu) * 2.6);
  font-family: "Nanum Pen Script", cursive; font-weight: 400; font-style: normal; text-transform: none;
  font-size: calc(var(--fu) * 19); line-height: .9;
  color: #111; background: #fffdf7;
  border: max(1px, calc(var(--fu) * .45)) solid #1a1a1a;
  border-radius: calc(var(--fu) * 2.2) calc(var(--fu) * 3.4) calc(var(--fu) * 2.6) calc(var(--fu) * 3.8) / calc(var(--fu) * 3.2) calc(var(--fu) * 2.2) calc(var(--fu) * 3.8) calc(var(--fu) * 2.4);
  box-shadow: calc(var(--fu) * .6) calc(var(--fu) * .9) 0 rgba(0, 0, 0, .18), 0 calc(var(--fu) * 1.6) calc(var(--fu) * 3.6) rgba(0, 0, 0, .22);
  transform: rotate(-5deg);
}