/* ============================================================
   LIBRARY — READING LOG
   Same palette as home.css / about.css / links.css.

   How the page is put together:
   - a cardboard background (the "desk")
   - the title on a torn scrap of paper
   - two rows of filter buttons (tags, then ratings)
   - a sheet for the books i'm reading right now (same paper as the years)
   - one sheet of hole-punched paper per year, which gets
     longer as you add books to that year
   - a few stickers scattered around
   ============================================================ */

:root {
  /* colours */
  --tan: #b38e67;
  --cream: #f7f1e2;
  --ink: #1e1e1e;
  --indigo: #2f34ad;
  --rust: #c1502f;
  --brown: #6b5c45;
  --green: #35603f;   /* the "currently reading" label */

  /* SIZES — the main numbers to play with.
     "vw" = % of the screen's width, so things keep the same proportions
     on any screen or zoom level. In clamp(smallest, ideal, biggest) the
     middle number is the one to change. */
  --page-width: clamp(860px, 76vw, 1420px);  /* year tag + paper together. bigger middle number = wider paper */
  --year-col: clamp(84px, 8vw, 116px);       /* strip left of the paper where the year tag sits */
  --edge: clamp(20px, 4vw, 56px);            /* gap between everything and the edge of the screen */
}

/* TAG COLOURS — one block per tag. --tag-bg = chip colour, --tag-ink = text on it.
   To add a new tag, copy one block and change the name + colours.
   The name must match data-filter on the button in the HTML. */
[data-filter="childrens"], [data-tag="childrens"] {
  --tag-bg: #e0a526;   /* crayon yellow */
  --tag-ink: #1e1e1e;
}
[data-filter="manga"], [data-tag="manga"] {
  --tag-bg: #b0356b;   /* screentone pink */
  --tag-ink: #f7f1e2;
}
[data-filter="graphic"], [data-tag="graphic"] {
  --tag-bg: #c1502f;   /* rust */
  --tag-ink: #f7f1e2;
}
[data-filter="novel"], [data-tag="novel"] {
  --tag-bg: #2f34ad;   /* indigo */
  --tag-ink: #f7f1e2;
}
[data-filter="poetry"], [data-tag="poetry"] {
  --tag-bg: #1f6f78;   /* deep teal */
  --tag-ink: #f7f1e2;
}
[data-filter="fiction"], [data-tag="fiction"] {
  --tag-bg: #4f7a4a;   /* leaf green */
  --tag-ink: #f7f1e2;
}
[data-filter="nonfiction"], [data-tag="nonfiction"] {
  --tag-bg: #6b5c45;   /* brown */
  --tag-ink: #f7f1e2;
}

html, body { margin: 0; padding: 0; min-height: 100%; }
* { box-sizing: border-box; }

body {
  color: var(--ink);
  font: bolder 8pt 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
}

/* invisible helper <svg> at the top of the HTML (holds the paper edge effects) */
.paper-filters { position: absolute; width: 0; height: 0; }

/* CONTENT AREA — loads into the "rightside" frame like about.html/links.html.
   The background behind the papers. To change it, swap the file name for
   any other pattern in images/patternsbg/. */
.content-area {
  min-height: 100vh;
  background-color: var(--tan);  /* shows briefly while the image loads */
  background-image: url("../images/patternsbg/cardboard.png");
  background-repeat: repeat;
  padding: var(--edge);
  position: relative;
  overflow-x: clip;     /* a sticker poking past the right edge never causes sideways scrolling */
}

/* ---- PAGE CONTENT WRAPPER ----
   Centers the whole column of content on the page. Text inside stays
   left-aligned as normal — this only moves the block itself to the middle. */
.page-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  position: relative;   /* so stickers placed directly inside it measure from its edges */
}

/* ---- HERO: TITLE ON A TORN SCRAP OF PAPER ----
   The title + intro sit on .log-hero. The paper itself is drawn by
   ::before (a layer behind the text), so the torn-edge effect only
   roughens the paper and never the words. */
.log-hero {
  position: relative;
  isolation: isolate;    /* keeps the paper layer behind the text but in front of the cardboard */
  /* lines up with the year papers: starts where they start (after the year tag strip)
     and runs to the same right edge, so everything sits centred together */
  margin-left: var(--year-col);
  /* space inside the scrap: top | right | bottom | left.
     left is 7.2% so the title starts roughly above the date column */
  padding: clamp(22px, 2.2vw, 34px) clamp(32px, 5vw, 80px) clamp(26px, 2.5vw, 38px) 7.2%;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.log-hero::before {
  content: "";
  position: absolute;
  inset: 0;              /* same size as .log-hero */
  z-index: -1;           /* behind the text */
  /* the paper. paper-cream-web.jpg is the web copy of "NOAKABES TEXTURE (13)" */
  background: var(--cream) url("../images/papertextures/paper-cream-web.jpg") center / cover;
  /* #torn-paper = the torn edge (set up in the HTML), then a soft shadow under it */
  filter: url(#torn-paper) drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.35));
}

.page-title {
  font-family: 'Jacquard 12', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  color: var(--indigo);
  margin: 0 0 0.2em;
}

/* the one-liner under the title. same typewriter font as the book titles */
.log-intro {
  margin: 0;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-weight: normal;
  font-size: 12.5pt;
  letter-spacing: 0.5px;
  line-height: 1.6;
  max-width: 50ch;
}

/* the "↻ = reread" note under the intro. same typewriter font too */
.reread-key {
  margin: 12px 0 0;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-weight: normal;
  font-size: 12.5pt;
  letter-spacing: 0.5px;
  line-height: 1;
}
.reread-key .reread-badge {
  vertical-align: -3px;   /* nudges the symbol down to sit level with the words */
  margin-right: 4px;
  cursor: default;
}

/* ---- TAG FILTER BUTTONS ----
   The row of buttons above the first year. Lined up with the left edge
   of the year papers (that is what the margin-left is for). */
.filters {
  display: flex;
  flex-wrap: wrap;   /* buttons drop to a new line when there isn't room */
  gap: 8px;
  margin: 0 0 clamp(18px, 2.5vw, 28px) var(--year-col);
}

/* the rating row sits closer under the tag row */
.filters + .rating-filters { margin-top: calc(-1 * clamp(18px, 2.5vw, 28px) + 8px); }

.filter, .rating-filter {
  font: inherit;           /* same font as the rest of the page */
  font-size: 9pt;
  letter-spacing: 1.5px;
  color: var(--ink);
  background: var(--cream);
  border: none;            /* no outline around the button */
  padding: 7px 12px;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.2);
}

/* the little colour dot before each tag name */
.filter::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--tag-bg, var(--ink));
}

.filter:hover, .rating-filter:hover { transform: translateY(-2px); }

.filter:focus-visible, .rating-filter:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* a rating button that is switched on */
.rating-filter.is-on {
  background: var(--ink);
  color: var(--cream);
}

/* the "no books match" line */
.no-matches {
  margin: 0 0 30px var(--year-col);
  font-size: 10pt;
}

/* the button that is switched on */
.filter.is-on {
  background: var(--tag-bg, var(--ink));
  color: var(--tag-ink, var(--cream));
}
.filter.is-on::before { background: var(--tag-ink, var(--cream)); }

/* ---- TAG CHIPS (made automatically from data-tags on each book row) ---- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.tag {
  font-size: 7pt;
  letter-spacing: 1px;
  padding: 2px 6px;
  background: var(--tag-bg);
  color: var(--tag-ink);
}

/* ---- HIDING (used by the filter buttons) ---- */
.is-hidden { display: none !important; }

/* ---- ONE BLOCK PER YEAR ----
   Copy a whole .year-block to start a new year.
   A year block is two things side by side:
     [ year tag ] [ sheet of paper with that year's table ]
   The tag sits OUTSIDE the paper, at its top-left corner. */
.year-block {
  display: grid;
  grid-template-columns: var(--year-col) minmax(0, 1fr);   /* tag strip | paper takes the rest */
  align-items: start;                                      /* tag stays at the top, not the middle */
  margin: 0 0 clamp(36px, 5vw, 64px);                      /* gap before the next year */
  position: relative;                                      /* so stickers inside it measure from its edges */
}

/* the year label. It sticks to the top of the screen while you scroll
   through that year's books, then leaves with its paper. */
.year-tag {
  position: sticky;
  top: 12px;
  justify-self: end;       /* pushed right, so it touches the paper */
  margin-top: 22px;        /* how far down from the paper's top corner */
  margin-right: -5px;      /* tucks it a few px under the paper's edge. 0 = just touching */
  background: var(--indigo);
  color: var(--cream);
  font-family: 'Jacquard 12', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  padding: 2px 18px;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.25);
}

/* alternate colour so consecutive years are easy to tell apart at a glance */
.year-tag.alt { background: var(--rust); }

/* ---- THE SHEET OF PAPER ----
   Only as big as the table inside it, so it gets longer as you add books.
   Like the title scrap, the paper is drawn by ::before behind the content. */
.year-paper {
  position: relative;
  isolation: isolate;
  /* soft shadow under the sheet (it follows the wavy edges and the holes) */
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
  /* space inside the sheet: top | right | bottom | left.
     Left is wide (7%) so nothing sits on top of the punched holes.
     right is wide too (7vw) so the stickers on the right edge never cover the thoughts text.
     if i make those stickers bigger again, make this 7vw bigger too. */
  padding: clamp(26px, 3.5vw, 48px) clamp(18px, 7vw, 115px) clamp(20px, 2.5vw, 36px) 7%;
}

.year-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* the paper scan. The image is the scan plus mirrored copies of itself
     (one beside it, one below), so wherever the paper has to carry on —
     sideways or downwards (repeat-y) — the join is invisible.
     The punched holes are see-through, so the cardboard shows in them.

     HOLE SIZE / HOW "ZOOMED IN" THE PAPER LOOKS = background-size below.
     Smaller % = smaller holes and finer paper. Bigger % = bigger holes.
     Don't go under 110%, or a second row of holes shows up on the right edge.

     TO TRY ANOTHER PAPER: change the number in the file name.
     16, 17, 18, 19, 20 and 21 are all in images/papertextures/ — web copies
     of the "NOAKABES TEXTURE" scans with the same numbers. */
  background-image: url("../images/papertextures/paper-holepunch-21.webp");
  background-size: 120% auto;
  background-repeat: repeat-y;
  /* slightly uneven edges: "mask" cuts the paper to the shape stored in
     --sheet-edge (see the very bottom of this file).
     Delete these two lines for perfectly straight edges. */
  -webkit-mask: var(--sheet-edge) 0 0 / 100% 100% no-repeat;
          mask: var(--sheet-edge) 0 0 / 100% 100% no-repeat;
}

/* start every 2nd and 3rd sheet at a different spot on the paper, so the
   holes and creases don't land in the same place on every year */
.year-block:nth-child(2n) .year-paper::before { background-position: 0 -640px; }
.year-block:nth-child(3n) .year-paper::before { background-position: 0 -1180px; }

/* ---- "CURRENTLY READING" SHEET ----
   It is a year block with two extra class names (reading-now on the block,
   now-tag on the label). Everything here only changes what is different
   from a normal year sheet. */

/* the label: green, smaller, on two lines */
.year-tag.now-tag {
  background: var(--green);
  font-size: clamp(14px, 1.45vw, 19px);
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  padding: 5px 10px 6px;
}

/* the paper: same hole-punched paper as the year sheets, so nothing to set here.
   (if i ever want a different paper just for this sheet, add
   .year-block.reading-now .year-paper::before { background-image: url("..."); } ) */

/* the books sit side by side as little cards instead of rows in a table */
.reading-now .log-table,
.reading-now .log-table tbody { display: block; }
.reading-now .log-table tbody {
  display: grid;
  /* as many columns as fit, each at least 250px wide */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px 30px;       /* space between cards: up-down | left-right */
}
.reading-now .log-table tr {
  display: flex;        /* cover, (reread symbol), title in a line */
  align-items: flex-start;
  gap: 12px;
}
.reading-now .log-table td {
  display: block;
  width: auto;
  padding: 0;
  border: none;
}
.reading-now .log-table td.col-reread:empty { display: none; }   /* not a reread = no gap */

/* ---- STICKERS ----
   Any <img class="sticker">. Where each one sits is written on the
   sticker itself in the HTML (its style="..."). */
.sticker {
  position: absolute;
  z-index: 4;                 /* on top of the papers */
  height: auto;
  min-width: 60px;            /* never smaller than this... */
  max-width: 290px;           /* ...or bigger than this, whatever the screen size */
  pointer-events: none;       /* clicks go straight through to whatever is underneath */
  /* four tiny white shadows (right, left, down, up) = the white sticker edge,
     then one soft dark shadow underneath */
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.35));
}

/* ---- CREDITS (the little scrap at the bottom of the page) ----
   built like the year sheets: the paper is drawn by ::before behind the words,
   so the wavy edge only cuts the paper and never the text. */
.credits {
  position: relative;
  isolation: isolate;
  width: fit-content;                  /* only as wide as the words inside */
  max-width: calc(100% - var(--year-col));
  margin: 0 0 20px var(--year-col);    /* lines up with the left edge of the year sheets */
  padding: 16px 26px 18px;
  filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.3));   /* soft shadow under the scrap */
}
.credits::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* same cream paper as the title scrap */
  background: var(--cream) url("../images/papertextures/paper-cream-web.jpg") center / cover;
  /* same wavy edge as the year sheets (--sheet-edge is at the very bottom of this file) */
  -webkit-mask: var(--sheet-edge) 0 0 / 100% 100% no-repeat;
          mask: var(--sheet-edge) 0 0 / 100% 100% no-repeat;
}
.credits h2 {
  margin: 0 0 4px;
  font-family: 'Jacquard 12', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--indigo);
}
.credits p {
  margin: 0;
  font-family: 'Special Elite', 'Courier New', monospace;   /* same typewriter font as the book titles */
  font-weight: normal;
  font-size: 11pt;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
.credits a { color: var(--rust); }

/* ---- TABLE ---- */
.log-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }

.log-table th {
  text-align: left;
  font-family: 'Jacquard 12', sans-serif;
  font-weight: 400;
  color: var(--brown);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 6px 8px;
  border-bottom: 2px solid var(--brown);
}

.log-table td {
  padding: 10px 8px;
  border-top: 1px dashed var(--brown);
  vertical-align: top;
}

.col-date { width: 8%; white-space: nowrap; }
.col-cover { width: 60px; }
.col-reread { width: 34px; }   /* the narrow strip for the reread symbol */
.col-title { width: 22%; }
.col-rating { width: 22%; white-space: nowrap; }   /* nowrap = stars always stay on one line */
.col-thoughts { width: 32%; }
.log-table td.col-thoughts { vertical-align: middle; }   /* "click for thoughts" sits in the middle of the row, not at the top */

/* ---- GOLD STAR STICKERS ----
   The script fills each .col-rating cell with these based on its
   data-rating. The picture it uses is set by STAR_IMAGE in the HTML's
   <script> (right now images/elements/star.png). If that picture ever goes
   missing, it falls back to a plain text star so the ratings still read fine.

   Sized big and given a small random tilt (set in the script) on purpose —
   these should read as stickers pasted on the page, not tiny inline icons. */
.star-icon {
  width: 30px;         /* star size */
  height: auto;        /* keeps the star's own shape instead of squashing it */
  display: inline-block;
  vertical-align: middle;
  margin: -4px -2px;   /* lets the bigger stars sit close without pushing the row apart */
}

/* PART STARS (half, quarter...) are the same star picture with its right
   side cut away — the script does that, so there is nothing to set here. */

.star-icon-fallback {
  color: var(--rust);
  font-weight: bold;
  font-size: 22px;
  margin-right: 2px;
}

/* small cover thumbnail. Every book has .cover-fallback: a plain coloured
   square with the title's first letter. If the book has a cover picture,
   the picture is placed exactly on top of that square and hides the letter.
   (The comment in the HTML shows how to add or change a cover.) */
.col-cover img, .cover-fallback {
  width: 44px;
  height: 64px;
  object-fit: cover;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3);
  display: block;
}

.cover-fallback {
  position: relative;            /* so the cover picture can sit on top of it */
  display: flex;                 /* flex = lets the letter sit dead centre */
  background: var(--indigo);
  color: var(--cream);
  align-items: center;
  justify-content: center;
  font-family: 'Jacquard 12', sans-serif;
  font-size: 20px;
}

/* the cover picture: stretched over the whole letter square */
.cover-fallback img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fills the square, trimming a little off the edges if needed */
  box-shadow: none;      /* the square underneath already has the shadow */
}

/* book titles: Special Elite = inky typewriter font (loaded at the top of the html).
   it only comes in one weight, so no bold. to try another font, change the name here
   AND in the google fonts link in the html. */
.col-title strong {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-weight: normal;
  font-size: 11.5pt;       /* title size */
  letter-spacing: 0.5px;
  line-height: 1.25;
}

.author { color: var(--brown); font-style: italic; font-weight: normal; }

/* ---- REREAD SYMBOL ----
   A ↻ character (not an image) that marks a reread. It sits in its own
   narrow cell (.col-reread) between the cover and the title. */
.log-table td.col-reread {
  padding-left: 0;       /* no side padding, so the symbol sits snug next to the cover */
  padding-right: 0;
  text-align: center;
}

.reread-badge {
  display: inline-block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;   /* always this font, so the symbol looks the same everywhere */
  color: var(--rust);
  font-size: 24px;             /* how big the symbol is */
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0;
  transform: rotate(-10deg);   /* slight tilt, like it was stamped on */
  cursor: help;                /* hovering shows the word "reread" */
}

/* expandable review — same +/- toggle idea as the collapsible
   categories in links.css, just reused inside a table cell */
.col-thoughts summary {
  cursor: pointer;
  list-style: none;
  color: var(--rust);
  font-weight: bold;
  position: relative;
  padding-right: 1.2em;
}
.col-thoughts summary::-webkit-details-marker { display: none; }
.col-thoughts summary::after { content: "+"; margin-left: 4px; }
.col-thoughts details[open] summary::after { content: "\2212"; }
.col-thoughts p { margin: 8px 0 0; font-weight: normal; color: var(--ink); line-height: 1.5; }

/* ============================================================
   SMALL SCREENS (phones)
   ============================================================ */
@media (max-width: 700px) {

  /* title scrap goes full width, with less empty space inside */
  .log-hero {
    width: 100%;
    margin-left: 0;
    padding: 34px 30px 38px 34px;
  }

  /* no room for stickers on a phone */
  .sticker { display: none; }

  /* filter buttons start at the left edge */
  .filters { margin-left: 0; }
  .no-matches { margin-left: 0; }
  .credits { margin-left: 0; max-width: 100%; }

  /* year tag goes on top of its paper instead of beside it,
     overlapping the paper's top edge a little like a tab */
  .year-block { display: block; }
  .year-tag {
    position: relative;      /* no longer sticks while scrolling */
    display: inline-block;
    z-index: 1;              /* in front of the paper */
    margin: 0 0 -12px 14px;  /* -12px = how much it overlaps the paper */
  }
  .year-paper { padding: 30px 16px 26px 13%; }
  /* draw the paper more zoomed in on a small screen, so the grain and
     holes don't shrink to specks. Smaller % = smaller holes. */
  .year-paper::before { background-size: 260% auto; }

  /* drop the table header row and turn each book into a little card
     instead of squeezing 5 columns into a phone width:
     date on top, cover on the left with title + stars beside it,
     thoughts underneath. */
  .log-table thead { display: none; }
  .log-table, .log-table tbody, .log-table tr, .log-table td { display: block; }

  /* one book = one block, with a single dashed line between books */
  .log-table tr {
    display: flow-root;                    /* makes the row wrap around the floated cover */
    border-top: 1px dashed var(--brown);
    padding: 12px 0;
  }
  .log-table tr:first-child { border-top: none; }   /* no line above the first book */

  /* cells stop being columns: no fixed widths, no lines between them */
  .log-table td { width: auto; border-top: none; padding: 2px 0; }

  /* cover sits on the left, title + stars flow beside it */
  .log-table .col-cover { float: left; margin: 4px 12px 4px 0; }

  /* reread symbol tucks in right after the cover; a first read (empty cell) takes no space */
  .log-table td.col-reread { float: left; margin: 2px 10px 0 -2px; }
  .log-table td.col-reread:empty { display: none; }
  .log-table .col-rating { padding-top: 8px; }   /* a little air between author and stars */
  .log-table .col-rating:empty { display: none; }   /* no rating = no empty gap */

  /* thoughts go full width under the cover; an empty one takes no space */
  .log-table .col-thoughts { clear: both; padding-top: 8px; }
  .log-table .col-thoughts:empty { display: none; }

  /* "currently reading" sheet: keep its cards (undo the row styles above), one per line */
  .reading-now .log-table tbody { grid-template-columns: 1fr; }
  .reading-now .log-table tr { display: flex; border-top: none; padding: 0; }
  .reading-now .log-table td { padding: 0; }
  .reading-now .log-table .col-cover,
  .reading-now .log-table td.col-reread { float: none; margin: 0; }
}

/* ============================================================
   SHEET EDGE SHAPE — nothing to edit down here
   --sheet-edge is a tiny drawing written out as text: a rectangle with
   small wavy bites taken out of all four edges. .year-paper::before uses
   it as a mask, which is what stops the year sheets looking ruler-cut.
   It lives inside the CSS (rather than as a separate image file) because
   browsers refuse to use a separate file as a mask when you open the page
   straight from your computer.
   ============================================================ */
:root {
  --sheet-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='l' width='20' height='480' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,0L3.1,0L2.6,10L3,20L3,30L1.8,40L1,50L1.7,60L2.4,70L2.6,80L3.2,90L3.7,100L2.9,110L1.6,120L1.8,130L2.4,140L2.1,150L1.6,160L1.7,170L1.1,180L0.4,190L0.4,200L1.8,210L2.7,220L2.8,230L3.3,240L3.8,250L3.4,260L3.4,270L4.6,280L5.4,290L4.7,300L4,310L3.8,320L3.2,330L2.7,340L3.5,350L4.8,360L4.6,370L4,380L4.3,390L4.8,400L4.7,410L5.3,420L6.4,430L6.1,440L4.6,450L3.7,460L3.6,470L3.1,480L0,480Z'/%3E%3C/pattern%3E%3Cpattern id='r' width='20' height='480' patternUnits='userSpaceOnUse'%3E%3Cpath d='M20,0L17,0L17.6,10L17.2,20L17.4,30L17.8,40L17.5,50L17.7,60L19.2,70L19.6,80L19.6,90L18.9,100L18.7,110L18.1,120L17.2,130L17.5,140L18.1,150L17.3,160L15.9,170L15.7,180L16,190L15.9,200L16.5,210L17.7,220L17.8,230L16.6,240L16,250L16.4,260L16.2,270L15.8,280L16.1,290L15.9,300L14.4,310L13.3,320L13.9,330L14.7,340L14.9,350L15.5,360L16.4,370L16.1,380L15.5,390L16.3,400L17.7,410L17.9,420L17.6,430L17.7,440L17.1,450L15.9,460L15.8,470L17,480L20,480Z'/%3E%3C/pattern%3E%3Cpattern id='t' width='560' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,0L0,4.9L10,5.8L20,5.9L30,4.8L40,3.6L50,3.4L60,3.8L70,3.8L80,3.7L90,4.1L100,4.8L110,4.5L120,3.6L130,3.4L140,4.3L150,5.3L160,5.4L170,5.3L180,5.5L190,5.3L200,4.1L210,2.8L220,2.6L230,3.1L240,3.1L250,2.4L260,1.9L270,1.9L280,1.5L290,0.6L300,0.5L310,1.6L320,2.8L330,3L340,2.6L350,2.6L360,2.7L370,2.3L380,1.6L390,1.9L400,2.8L410,3L420,2.1L430,1.1L440,1L450,1.1L460,0.9L470,1.1L480,2.3L490,3.6L500,3.8L510,3.3L520,3.3L530,4L540,4.5L550,4.5L560,4.9L560,0Z'/%3E%3C/pattern%3E%3Cpattern id='b' width='560' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,20L0,17L10,15.9L20,14.6L30,14.2L40,14.9L50,15.5L60,15.2L70,14.9L80,15.1L90,15.2L100,14.8L110,14.7L120,15.7L130,17L140,17.3L150,16.6L160,16.1L170,16.1L180,15.7L190,15L200,15L210,15.9L220,16.5L230,16L240,15.2L250,15.3L260,15.9L270,16.2L280,16.6L290,17.7L300,19L310,19.4L320,18.7L330,18.1L340,18.4L350,18.7L360,18.5L370,18.4L380,18.8L390,18.9L400,17.9L410,16.6L420,16.3L430,17L440,17.5L450,17.5L460,17.9L470,18.6L480,18.6L490,17.7L500,17.1L510,17.6L520,18.4L530,18.3L540,17.7L550,17.4L560,17L560,20Z'/%3E%3C/pattern%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Crect width='10' height='100%25' fill='url(%23l)'/%3E%3Crect width='100%25' height='10' fill='url(%23t)'/%3E%3Csvg x='100%25' overflow='visible'%3E%3Crect x='-10' width='10' height='100%25' fill='url(%23r)'/%3E%3C/svg%3E%3Csvg y='100%25' overflow='visible'%3E%3Crect y='-10' width='100%25' height='10' fill='url(%23b)'/%3E%3C/svg%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' mask='url(%23m)'/%3E%3C/svg%3E");
}