@layer base, page, responsive;

@layer base {
  /* Shared book-page theme defaults. Individual pages (in the "page" layer)
     only need to override --ink, --shimmer-2, --dogear-a, --lines-a-bg,
     --lines-a-bg-hover and --selection-bg when they use a non-default accent
     color, plus their own --cover-* set. */
  :root{
    --tape-gray: #C3CDE6; /* Periwinkle */
    --tape-edge-gray: #8CADDA; /* Blue Bell */
    --page-color: #000000;
    --ink: #C3CDE6; /* Periwinkle */
    --shimmer-1: rgba(255,255,255,0.15);
    --shimmer-2: rgba(25,25,52,0.35);
    --page-edge: rgba(0,0,0,0.4);
    --dogear-a: rgba(25,25,52,0.6);
    --dogear-b: rgba(0,0,0,0.4);
    --nav-border: #191934;
    --lines-a-bg: rgba(25,25,52,0.6);
    --lines-a-bg-hover: rgba(25,25,52,0.8);
    --selection-bg: rgba(25,25,52,0.6);
    --h1-photo-bg: #000000;
    --rainbow-stops: #FF3399, #FF355E, #FF9980, #FED85D, #9DE093, #02A4D3, #4F69C6, #6B3FA0;
  }
  @media (prefers-color-scheme: light) {
    :root{
      --page-color: #eeeef6; /* Lavender */
      --ink: #100e25;
      --shimmer-1: rgba(255,255,255,0.35);
      --shimmer-2: rgba(221,221,238,0.4); /* Periwinkle */
      --page-edge: rgba(16,14,37,0.15);
      --dogear-a: rgba(221,221,238,0.5); /* Periwinkle */
      --dogear-b: rgba(0,0,0,0.2);
      --nav-border: #ddddee; /* Periwinkle */
      --lines-a-bg: rgba(221,221,238,0.6); /* Periwinkle */
      --lines-a-bg-hover: rgba(221,221,238,0.8); /* Periwinkle */
      --selection-bg: rgba(221,221,238,0.6); /* Periwinkle */
    }
  }

  html, body{
    height: 100%;
  }
  body{
    font-family:'Comic Sans MS', 'Comic Sans', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    background: url("data:image/gif;base64,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") repeat #000000;
  }
  @media (prefers-color-scheme: light) {
    body{
      background: url(../backgrounds/bg2.jpg) repeat #eeeef6; /* Lavender */
    }
  }
  img{max-width:100%; max-height:100%; object-fit: contain;}

  .sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .container{
    margin:0;
    height:100vh;
    display:flex;
    padding: 0;
    box-sizing: border-box;
  }

  .note{
    flex: 1 1 auto;
    display:flex;
    box-shadow: 0 0 8px black;
    padding: 0.5rem;
    box-sizing: border-box;
    min-width: 0;
  }

  .paper{
    flex: 1 1 auto;
    margin: 0;
    background: transparent;
    color:black;
    display:none;
    position: relative;
    flex-direction:column;
    box-shadow: 0 0 6px black;
    overflow:visible;
    padding: 1.25rem 0;
    min-width: 0;
  }

  .book-cover{
    flex: 0 0 auto;
    width: 50%;
    margin: -0.5rem -0.5rem -0.5rem auto;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left: 3.125rem;
    box-sizing: border-box;
    min-width: 0;
    background-image: var(--cover-bg-image);
    background-color:#000;
    background-repeat: repeat;
  }
  .book-cover::before{
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.85), transparent 40%);
  }
  @media (prefers-color-scheme: light) {
    .book-cover::before{
      background: none;
    }
  }
  .book-cover a{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    cursor:pointer;
    background: var(--cover-a-bg);
    padding: 1.5rem 2.25rem;
    border-radius: 0;
    border: 6px solid transparent;
    border-image: var(--cover-border-image);
    box-shadow:
      0 4px 14px rgba(0,0,0,0.5),
      inset 0 2px 6px var(--cover-inset-shadow, rgba(0,0,0,0.45)),
      inset 0 -2px 6px var(--cover-highlight);
  }
  .book-cover img{
    max-width:70%;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
  }
  .book-cover .cover-text{
    font-family: 'Kristen ITC', 'Comic Sans MS', sans-serif;
    font-size: 2rem;
    color: var(--ink);
    letter-spacing: 0.05em;
    text-align: center;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.6));
  }

  .cover-spine{
    position: absolute;
    top: 2.75rem;
    bottom: 2.75rem;
    left: -1.25rem;
    width: 3.75rem;
    pointer-events: none;
    z-index: 1;
  }
  .cover-spine::before,
  .cover-spine::after{
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3.75rem;
    background-repeat: repeat-y;
    background-size: 3.75rem 2.5rem;
    background-position: left top;
  }
  .cover-spine::before{
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2760%27%20height%3D%2740%27%3E%3Crect%20x%3D%2738%27%20y%3D%2713%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%271%27%20fill%3D%27%230a0a0a%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%271%27/%3E%3C/svg%3E");
  }
  .cover-spine::after{
    z-index: 2;
    filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.45));
  }

  .spread{
    position: relative;
    z-index: 0;
    flex: 1 1 auto;
    display:none;
    flex-direction:row;
    align-items: stretch;
    gap: 3.125rem;
    min-height: 0;
  }

  .page-nav{
    flex-shrink: 0;
    display:flex;
    padding: 0.375rem 1.25rem 0.875rem;
  }
  .page-left .page-nav{ justify-content: flex-start; }
  .page-right .page-nav{ justify-content: flex-end; }
  .page-nav a{
    font-family:'Comic Sans MS', 'Comic Sans', sans-serif;
    font-size: 1.25rem;
    color: var(--ink);
    text-decoration:none;
    border: 1px dashed var(--nav-border);
    border-radius: 0.5rem;
    padding: 0.5rem 1.25rem;
  }

  .dog-ear{
    position:absolute;
    bottom:0;
    width:10.5rem;
    height:10.5rem;
    z-index:1;
    display:flex;
    font-family:'Comic Sans MS', 'Comic Sans', sans-serif;
    font-size:1.4rem;
    color: var(--ink);
    text-decoration:none;
    box-sizing:border-box;
  }
  .dog-ear-left{
    left:0;
    clip-path: polygon(0 100%, 0 25%, 75% 100%);
    background: linear-gradient(135deg, var(--dogear-a), var(--dogear-b));
    align-items:flex-end;
    justify-content:flex-start;
    padding: 0 0 0.75rem 0.75rem;
  }
  .dog-ear-right{
    right:0;
    clip-path: polygon(100% 100%, 100% 25%, 25% 100%);
    background: linear-gradient(225deg, var(--dogear-a), var(--dogear-b));
    align-items:flex-end;
    justify-content:flex-end;
    padding: 0 0.75rem 0.75rem 0;
  }
  .page{
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    z-index: 1;
    position: relative;
    display:flex;
    flex-direction:column;
    background-color: var(--page-color);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.5%20%200%200%200%200%200.5%20%200%200%200%200%200.5%20%200%200%200%200.13%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url(%23n)%27/%3E%3C/svg%3E");
    background-repeat: repeat;
    box-shadow:
      0 16px 26px rgba(0,0,0,0.55),
      0 0 0 1px var(--page-edge);
  }

  .lines{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 1rem 2.5rem 1.5rem;
    line-height:1.625rem;
    color: var(--ink);
  }

  .spine{
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    width: 5.625rem;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    background:
      linear-gradient(to right,
        transparent 0, transparent 0.5rem,
        rgba(0,0,0,0.4) 0.875rem, rgba(0,0,0,0.4) 4.75rem,
        transparent 5.125rem, transparent 5.625rem
      ),
      linear-gradient(to right,
        rgba(0,0,0,0.1) 0%, transparent 15%,
        transparent 85%, rgba(0,0,0,0.1) 100%
      );
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 3.75rem, black calc(100% - 3.75rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 3.75rem, black calc(100% - 3.75rem), transparent 100%);
  }
  .spine-coil{
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    width: 5.625rem;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
  }
  .spine-coil::before,
  .spine-coil::after{
    content:"";
    position: absolute;
    inset: 0;
    background-repeat: repeat-y;
    background-size: 5.625rem 2.5rem;
    background-position: center top;
  }
  .spine-coil::before{
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2790%27%20height%3D%2740%27%3E%3Crect%20x%3D%273%27%20y%3D%2713%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%271%27%20fill%3D%27%230a0a0a%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%271%27/%3E%3Crect%20x%3D%2773%27%20y%3D%2713%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%271%27%20fill%3D%27%230a0a0a%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%271%27/%3E%3C/svg%3E");
  }
  .spine-coil::after{
    z-index: 2;
    filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.45));
  }

  .lines h1, .lines h2, .lines h3, .lines h4, .lines h5, .lines h6, .lines ul, .lines ol, .lines li{margin:0}
  .lines h1, .lines h2, .lines h3, .lines h4, .lines h5, .lines h6{
    font-family: 'Kristen ITC', 'Comic Sans MS', sans-serif;
  }

  .lines ul{
    list-style: none;
    padding-left: 1.75rem;
  }
  .lines ul li{
    list-style: none;
    padding-left: 1.75rem;
    background-image: url('data:image/gif;base64,R0lGODlhDwAPALMAAAAAAISEhMaMAMbGxsb/xufn5/ch//97AP+E//+1AP/GhP/G///ehP/nxv///8D/wCH5BAEAAA8ALAAAAAAPAA8AAARN8MlJAaB4AoRu1siydN8DDMCIGF41FMVmsBjAAMWA0hXDJKdAoCWx/RLAYc2HTAgERBMT+YxaAM1qBqDAOqEfQKMLAIcBh4OlZLpGMREAOw==');
    background-repeat: no-repeat;
    background-position: left 0.2rem;
    background-size: 15px 15px;
  }

  .lines ol{
    padding-left: 2.25rem;
  }
  .lines ol li::marker{
    color: var(--li-color, var(--ink));
    font-weight: bold;
  }
  .lines h1{
    font-size:20pt;
    margin: 1.625rem 0 1.625rem;
    text-align: center;
  }
  .lines h2{
    text-align: center;
  }
  .lines h1 img{
    display:block;
    height:3.25rem;
    width:auto;
    max-width:100%;
  }
  .lines h1 .h1-photo, .lines h2 .h1-photo, .lines h3 .h1-photo{
    position:relative;
    display:inline-block;
    vertical-align: top;
    background: var(--h1-photo-bg);
    padding: 0.625rem 1rem;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.35);
  }
  .lines h1 .h1-photo, .bird-gallery .photo{
    position:relative;
  }
  .lines h1 .h1-photo::before, .lines h2 .h1-photo::before, .lines h3 .h1-photo::before, .bird-gallery .photo::before{
    content:"";
    position:absolute;
    top:-0.625rem;
    left:50%;
    transform: translateX(-50%) rotate(-2deg);
    width:60%;
    height:1.125rem;
    background-color: var(--tape-gray);
    border-right:1px dotted var(--tape-edge-gray);
    border-left:1px dotted var(--tape-edge-gray);
    opacity:0.4;
    box-shadow:0.5px 0.5px 1px rgba(0,0,0,0.2);
  }
  .lines h2 .h1-photo img, .lines h3 .h1-photo img{
    display:block;
    max-width:100%;
  }

  /* Polaroid-style photo gallery (bird photos, scrapbook pages, etc). */
  .bird-gallery{
    display:flex;
    flex-wrap:wrap;
    align-items: flex-start;
    gap:1rem;
    margin: 1.25rem 0 1.625rem;
  }
  .bird-gallery .photo{
    z-index: 2;
    margin:0;
    box-sizing:border-box;
    flex: 0 0 calc(25% - 1rem);
    min-width: 5.625rem;
    background: var(--photo-frame, #000);
    padding:0.5rem 0.5rem 1rem;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.35);
    transform: rotate(-1.5deg);
  }
  .bird-gallery .photo:nth-child(4n+2){ transform: rotate(1deg); }
  .bird-gallery .photo:nth-child(4n+3){ transform: rotate(-0.5deg); }
  .bird-gallery .photo:nth-child(4n){ transform: rotate(1.5deg); }
  .bird-gallery .photo a{
    display:block;
    cursor: pointer;
    padding:0;
    background:none;
  }
  .bird-gallery .photo a:hover{
    background:none;
  }
  .bird-gallery .photo img{
    display:block;
    width:100%;
    aspect-ratio: 1 / 1;
    object-fit:cover;
    filter: saturate(0.85) contrast(1.05) sepia(0.1);
  }
  .bird-gallery .photo figcaption{
    font-size:1.3rem;
    line-height: 1.2;
    text-align:center;
    padding-top:0.375rem;
    overflow-wrap: break-word;
  }

  .lines p, .lines li{
    text-shadow:
      0.4px 0.4px 0 var(--shimmer-1),
      -0.3px -0.3px 0 var(--shimmer-2);
  }
  .lines p{
    text-indent: 1.875rem;
    margin-top:0;
    margin-bottom:1.625rem;
  }
  .lines p.center{
    text-align:center;
    text-indent:0;
  }

  .lines a{
    color:var(--ink);
    text-decoration:none;
    padding: 0 0.1875rem;
    background: var(--lines-a-bg);
  }
  *::-moz-selection{
    background: var(--selection-bg);
  }
  *::selection{
    background: var(--selection-bg);
  }

  .back-button{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 260px;
    height: 260px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid transparent;
    background-image:
      linear-gradient(#000000, #000000),
      linear-gradient(180deg, var(--rainbow-stops));
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 0 0;
    background-size: auto, 100% 100%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .back-button:focus{
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .back-button::after{
    content:"";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-image: url('../backgrounds/moontexture.png');
    background-size: 90px 90px;
    background-repeat: repeat;
    background-position: center;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
  }
  .back-button span{
    position: absolute;
    top: 68%;
    left: 68%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-family: 'Zen Dots', monospace;
    font-size: 1.4rem;
    font-weight: normal;
    white-space: nowrap;
    color: var(--ink);
    -webkit-text-stroke: 1.25px #100e25;
    paint-order: stroke fill;
    text-shadow:
      1.5px 1.5px 0 #100e25,
      -1.5px 1.5px 0 #100e25,
      1.5px -1.5px 0 #100e25,
      -1.5px -1.5px 0 #100e25;
  }
  .back-button:hover span{
    filter: brightness(1.3);
  }
  @media (prefers-color-scheme: light) {
    .back-button{
      background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(180deg, var(--rainbow-stops));
      box-shadow: 0 2px 8px rgba(16, 14, 37, 0.25);
    }
    .back-button:hover{
      box-shadow: 0 2px 16px rgba(16, 14, 37, 0.4);
    }
    .back-button span{
      -webkit-text-stroke: 0.75px #100e25;
      text-shadow:
        1.5px 1.5px 0 #ffffff,
        -1.5px 1.5px 0 #ffffff,
        1.5px -1.5px 0 #ffffff,
        -1.5px -1.5px 0 #ffffff;
    }
  }
}

@layer responsive {
  @media (max-width:1100px) {
    html, body{ height: auto; }
    .container{ height: auto; min-height: 100vh; }
    .note{ display:block; }
    .spine, .spine-coil{ display:none; }
    .page{ display:block; }
    .lines{ overflow-y: visible; }

    .book-cover{ display:none; }
    .paper{ display:block; }
    .spread{ display:block; }
    .page-nav{ display:none; }
    .dog-ear{ display:none; }
    .back-button{ display:none; }
  }

  @media (max-width:576px) {
    .paper{margin:0.125rem;}
    .lines p{text-indent:0;}
    .bird-gallery .photo{ flex: 0 0 calc(50% - 1rem); }
  }
}