/* 
  /````\                       /`)                /````)
 (_.    ) _   _   _     ,  ,  ( /    _   .,       \, :/ _    ,_   .
:```\  / / ) ( ' / : / / \/\  |/`\._/_) / )     /``\)  / )  /  )  )\
\__/ \/  \/_/:__/\/_/|/  |  \_/\_/  \__/  \_.  (.___\. \/__/\_/\_/ ()-,

+-------+
| ABOUT |
+-------+

This is the primary stylesheet for decemberseas.com.
Coded from scratch by December Seas unless otherwise noted.

           Base URL: <https://decemberseas.com>

            Version:  1.0.1
Versioning standard: <https://semver.org>

       Last updated: December 19, 2024

=========================================
           TABLE OF CONTENTS
-----------------------------------------
Type the search key into the "find" box
(ctrl + F or cmd + F) to jump to section.
=========================================
Section name                   Search key
-----------------------------------------
1. Global ..................... ds-global

  1.1 Bug fixes ................ ds-fixes
  1.2 Fonts .................... ds-fonts
  1.3 Palettes ................ ds-colors
  1.4 Normalize ............... ds-normal

2. UI elements .................... ds-ui

  2.1 Assets .................. ds-assets
  2.2 Typography ................ ds-type
  2.3 Buttons .................... ds-btn
  2.4 Callouts ............... ds-callout
  2.5 Asset attribution modal ... ds-attr

3. UX elements .................... ds-ux

  3.1 Skip link ................. ds-skip
  3.2 Return to top ............ ds-totop

4. Layout ..................... ds-layout

  4.1 Parts .................... ds-parts
  4.2 Menus ..................... ds-menu
  4.3 Grids ..................... ds-grid

=========================================

+------------------+ 
| ACKNOWLEDGEMENTS | 
+------------------+

* Wave ASCII art section separator by cjr <https://ascii.co.uk/art/wave>
* Scroll design from Boxes
    <https://boxes.thomasjensen.com/v2.2.1/box-designs-scroll.html#parchment>
*/

/*'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``

[ds-global]    GLOBAL
               Base styles reused throughout the site.

``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'*/

/*---------------------------------------------------------------------------*
 [ds-fixes]    BUG FIXES
               Ensure CSS behaves as expected across browsers & devices.
 *---------------------------------------------------------------------------*/

  body {
  /* Fix Safari bug with viewport units in calc() */
  /* h/t Mike Foskett <https://codepen.io/2kool2/pen/bxdzEJ> */
    min-height: 0vw;
  }

/*---------------------------------------------------------------------------*
 [ds-fonts]    FONTS
               Load & define fonts; set default rendering.
 *---------------------------------------------------------------------------*/

  @font-face {
    font-family: 'Fraunces';
    src:  url('/assets/fonts/Fraunces_72pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
  /*____________________________________________
    /\                                          \
    \_|  license: SIL OFL v1.1                   |
      |                                          |
      |  <https://decemberseas.com/assets/      |
      |   fonts/license_Fraunces-OFL.txt>        |
      |   _______________________________________|__
      \_/__________________________________________/ */
  }

  @font-face {
    font-family: 'Bitter';
    src:  url('/assets/fonts/Bitter-Medium.ttf') format('truetype');
    font-weight: normal;
  /*____________________________________________
    /\                                          \
    \_|  license: SIL OFL v1.1                   |
      |                                          |
      |  <https://decemberseas.com/assets/      |
      |   fonts/license_Bitter-OFL.txt>          |
      |   _______________________________________|__
      \_/__________________________________________/ */
  }

  @font-face {
    font-family: 'Bitter';
    src:  url('/assets/fonts/Bitter-MediumItalic.ttf') format('truetype');
    font-style: italic;
  /*____________________________________________
    /\                                          \
    \_|  license: SIL OFL v1.1                   |
      |                                          |
      |  <https://decemberseas.com/assets/      |
      |   fonts/license_Bitter-OFL.txt>          |
      |   _______________________________________|__
      \_/__________________________________________/ */
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
  /*____________________________________________
    /\                                          \
    \_|  license: SIL OFL v1.1                   |
      |                                          |
      |  <https://decemberseas.com/assets/      |
      |   fonts/license_Montserrat-OFL.txt>      |
      |   _______________________________________|__
      \_/__________________________________________/ */
  }

  :root {
    /* Define reusable variables for fonts */
      --serif: 'Fraunces', serif;
      --slab-serif: 'Bitter', serif;
      --sans-serif: 'Montserrat', sans-serif;
      --icons: 'december-seas-icons';
      
    /* Define font size */
    /* Fluidly variable between: 16px @ 320px and 32px @ 1920px */
    /* h/t Mike Foskett <https://codepen.io/2kool2/pen/bxdzEJ> */
      --font-size: calc(1rem + ((1vw - 0.2em) * 1));

    /* Define line height */
      --line-height: 1.6;

    /* Set font smoothing */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

  @media only screen and (min-width: 1280px) {
    /* Stop font from becoming gigantic on larger screens */
    :root {
      --font-size: 1.6rem;
    }
  }

/*---------------------------------------------------------------------------*
 [ds-colors]    PALETTES
                Define color variables; set dark mode.
 *---------------------------------------------------------------------------*/

/* +---+ .                         . 
   | # |/ `:.         _-``''--.`.,_,__   *
   |   |.  /         /               :--,
   |   |::/         (  BASE PALETTE  ==(_ - -
   |   |;/-------+   \       ---   ,_-=-`
   | O |/:::+++  |    `--========-' .
   \._./---------+           0 `         */

  :root {
    --droplets: #FFFFFF; /* canvas */
    --abyssal: #000000; /* high-contrast */
    --sea-salt: #889999; /* mid-contrast */
    --crystalline: #88999990; /* attribution subtle */
    --seafoam: #ECF5F5; /* subtle */
    --brine: #333333; /* body */
    --lace-veil: #BED8D8; /* dark mode body */
    --lighthouse: #EFEFEF; /* borders */
    --genteal: #007070; /* accent borders */
    --searulean: #118181; /* accent */
    --submerged: #0B5860; /* deep */
    --nocturne: #094b52; /* dark mode deep */
    --translucent: #0B586075; /* highlights */
    --seven-seas: #77c7c7; /* accent contrast */
  }

/* +---+ .                         . 
   | # |/ `:.         _-``''--.`.,_,__   *
   |   |.  /         /              :--,
   |   |::/         (   DARK MODE  ==(_ - -
   |   |;/-------+   \       ---   ,_-=-`
   | O |/:::+++  |    `--========-' .
   \._./---------+           0 `         */

  @media (prefers-color-scheme: dark) {
    #content {
      color: var(--lace-veil);
    }

    #content a {
      color: var(--seven-seas);
    }

    #content .attribution a:not(.attribution-open, .attribution-close) {
      color: var(--genteal);
    }

    #content .attribution a:not(.attribution-open, .attribution-close):hover {
      background-color: var(--seafoam);
      color: var(--nocturne);
    }

    #content :is(h2, h3, h4, h5, h6) {
      color: var(--seven-seas);
    }

    #global-header, #global-footer #internal-links {
      background-color: var(--submerged) !important;
      color: var(--seafoam);
    }

    #global-header .active {
      color: var(--droplets);
    }

    #global-header a, #global-footer a {
      color: var(--seafoam);
    }

    #global-header a:hover, #global-header a:focus, #global-footer a:hover, #global-footer a:focus {
      color: var(--droplets);
    }

    #global-footer h5 {
      color: var(--lace-veil);
    }

    #global-footer .icon {
      color: var(--seafoam);
    }

    #global-header .menu-dropdown a {
      color: var(--seafoam);
    }

    #global-footer #site-copyright {
      background-color: var(--nocturne);
      color: var(--lace-veil);
    }
  }

/*---------------------------------------------------------------------------*
 [ds-normal]    NORMALIZE
                Define or override default behavior for elements.
 *---------------------------------------------------------------------------*/

  /* Standardize box model and remove borders & whitespace for all elements */

    html {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }

    * {
      border: none;
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
    }

  /* Set default state styling for focus and selection */

    :root {
      --focus-outline: solid 0.125rem;
    }

    :focus {
      outline: var(--searulean) var(--focus-outline);
    }

    #topbar a:focus, #links-out a:focus, #topbar li:focus, #links-out li:focus {
      outline: var(--droplets) var(--focus-outline);
    }

    ::-moz-selection {
      color: var(--droplets);
      background-color: var(--searulean);
    }

    ::selection {
      color: var(--droplets);
      background-color: var(--searulean);
    }

    @media (prefers-color-scheme: dark) {
      ::-moz-selection {
        --accent: #118181; /* searulean */
      }

      ::selection {
        --accent: #118181; /* searulean */
      }
    }

  /* Set default link decorations */

    a {
      color: var(--searulean);
      border-radius: 5px;
    }

    #content a {
      text-decoration: underline;
    }

    #content a:hover {
      color: var(--submerged);
      background-color: var(--seafoam);
      text-decoration-color: var(--translucent);
    }

    @media (prefers-color-scheme: dark) {
      #content a:hover {
        background-color: var(--submerged);
        color: var(--droplets);
      }

      #content a:active, #content a:focus {
        color: var(--droplets) !important;
      }
    }

    #content a:focus {
      color: var(--submerged);
      text-decoration: none;
    }

    #global-footer ul:not(.menu-social) a:hover {
      text-decoration: underline;
    }

    .menu-item-link, #page-title a, #global-footer a, #global-footer .menu-social a:hover {
      text-decoration: none;
    }

  /* Adjust default styling for elements */

    address {
      display: inline-block;
      font-style: normal;
    }

    img, picture {
      max-width: 100%;
    }

    caption {
      caption-side: bottom;
    }

    dfn {
      font-style: normal;
      font-weight: 700;
    }

    #content ul {
      list-style-type: '\2726';
      margin: 2rem auto;
    }
  
    #content li {
      margin: 0 0 1rem 1rem;
      padding-left: 1rem;
    }

    #content li::marker {
      color: var(--searulean);
    }

    #markdown-toc {
      font-size: smaller;
    }

    mark {
      font-weight: bold;
      color: var(--searulean);
      padding: 0 3px;
      font-family: var(--sans-serif);
      background-color: var(--seafoam);
    }

    @media (prefers-color-scheme: dark) {
      mark {
        background-color: var(--translucent);
        color: var(--seafoam);
      }
    }

/*'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``

[ds-ui]    UI ELEMENTS
           Styling for UI elements, such as buttons.
           See layout section for menus.

``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'*/

/*---------------------------------------------------------------------------*
  [ds-assets]    DESIGN ASSETS
                 Load reusable design assets.
 *---------------------------------------------------------------------------*/

:root {
  --flourish: url('https://decemberseas.com/assets/images/flourish.svg');
    /*____________________________________________
      /\                                          \
      \_|  glyph from Beloved Ornaments            |
        |          by Laura Worthington Type       |
        |                                          |
        |  <https://lauraworthingtondesign.com/    |
        |   products/collections/beloved-complete> |
        |                                          |
        |  licensed under Adobe Fonts:             |
        |                                          |
        |  <https://fonts.adobe.com/fonts/         |
        |   beloved#licensing-section>             |
        |   _______________________________________|___
        \_/___________________________________________/ */

  --fleur-de-lis: url('https://decemberseas.com/assets/images/fleur-de-lis.svg');
    /*______________________________________________
      /\                                            \
      \_|  art by GarryKillian @ Freepik             |
        |                                            |
        |  <https://www.freepik.com/free-vector/     |
        |   set-decorative-corner-elements_          |
        |   6538966.htm>                             |
        |                                            |
        |  license: Freepik Premium                  |
        |                                            |
        |  <https://decemberseas.com/assets/        |
        |   images/fleur-de-lis_license-set-of-      |
        |   decorative-corner-elements-6538966.pdf>  |
        |   _________________________________________|__
        \_/____________________________________________/ */

    --seigaiha: url('https://decemberseas.com/assets/images/seigaiha.png');
      /*_____________________________________________
        /\                                           \
        \_|  art by Olga Libby for Subtle Patterns    |
          |                                           |
          |  <https://www.toptal.com/designers/       |
          |   subtlepatterns/seigaiha/>               |
          |                                           |
          |  original licensed under CC BY-SA         |
          |                                           |
          |  December Seas releases this remixed      |
          |  version (colors changed) under CC BY-SA  |
          |                                           |
          |  license:                                 |
          |                                           |
          |  <https://creativecommons.org/licenses/   |
          |   by-sa/3.0/>                             |
          |   ________________________________________|__
          \_/__________________________________________/ */

    --linear-wave: url('https://decemberseas.com/assets/images/wave.svg');
    --linear-wave-dark: url('https://decemberseas.com/assets/images/wave_dark.svg');
        /*______________________________________________
          /\                                            \
          \_|  art by pizzara @ Freepik                  |
            |                                            |
            |  <https://www.freepik.com/premium-vector/  |
            |   one-line-drawing-sea-ocean-waves-        |
            |   illustration_27139427.htm>               |
            |                                            |
            |  license: Freepik Premium                  |
            |                                            |
            |  <https://decemberseas.com/assets/        |
            |   images/wave_license-one-line-drawing-    |
            |   of-sea-ocean-waves-illustration-         |
            |   27139427.pdf>                            |
            |   _________________________________________|__
            \_/____________________________________________/ */

      --polaroid: url('https://decemberseas.com/assets/images/polaroid.png');
          /*_____________________________________________
            /\                                           \
            \_|  art by Daniel Beaton for Subtle Patterns |
              |                                           |
              |  <https://www.toptal.com/designers/       |
              |   subtlepatterns/polaroid/>               |
              |                                           |
              |  license: CC BY-SA                        |
              |                                           |
              |  <https://creativecommons.org/licenses/   |
              |   by-sa/3.0/>                             |
              |   ________________________________________|__
              \_/__________________________________________/ */

      --nami: url('https://decemberseas.com/assets/images/nami.png');
          /*_____________________________________________
            /\                                           \
            \_|  art by Dertig Media for Subtle Patterns  |
              |                                           |
              |  <https://www.toptal.com/designers/       |
              |   subtlepatterns/nami/>                   |
              |                                           |
              |  license: CC BY-SA                        |
              |                                           |
              |  <https://creativecommons.org/licenses/   |
              |   by-sa/3.0/>                             |
              |   ________________________________________|__
              \_/__________________________________________/ */

      --marble: url('https://decemberseas.com/assets/images/marbling.png');
            /*_____________________________________________
              /\                                           \
              \_|  art by Tegan Male for Subtle Patterns    |
                |                                           |
                |  <https://www.toptal.com/designers/       |
                |   subtlepatterns/scribble-light/>         |
                |                                           |
                |  original licensed under CC BY-SA         |
                |                                           |
                |  December Seas releases this remixed      |
                |  version (colors changed) under CC BY-SA  |
                |                                           |
                |  license:                                 |
                |                                           |
                |  <https://creativecommons.org/licenses/   |
                |   by-sa/3.0/>                             |
                |   ________________________________________|__
                \_/__________________________________________/ */

        --asphalt: url('https://decemberseas.com/assets/images/asphalt.png');
              /*_____________________________________________
              /\                                           \
              \_|  art by Atle Mo for Subtle Patterns       |
                |                                           |
                |  <https://www.toptal.com/designers/       |
                |   subtlepatterns/asfalt/>                 |
                |                                           |
                |  license: CC BY-SA                        |
                |                                           |
                |  <https://creativecommons.org/licenses/   |
                |   by-sa/3.0/>                             |
                |   ________________________________________|__
                \_/__________________________________________/ */

          --white-diamond: url('https://decemberseas.com/assets/images/whitediamond.png');
            /*_____________________________________________
              /\                                           \
              \_|  art by Atle Mo for Subtle Patterns       |
                |                                           |
                |  <https://www.toptal.com/designers/       |
                |   subtlepatterns/whitediamond/>           |
                |                                           |
                |  license: CC BY-SA                        |
                |                                           |
                |  <https://creativecommons.org/licenses/   |
                |   by-sa/3.0/>                             |
                |   ________________________________________|__
                \_/__________________________________________/ */
    
            --padded: url('https://decemberseas.com/assets/images/padded.png');
            /*_____________________________________________
              /\                                           \
              \_|  art by Chris Baldie for Subtle Patterns  |
                |                                           |
                |  <https://www.toptal.com/designers/       |
                |   subtlepatterns/padded/>                 |
                |                                           |
                |  license: CC BY-SA                        |
                |                                           |
                |  <https://creativecommons.org/licenses/   |
                |   by-sa/3.0/>                             |
                |   ________________________________________|__
                \_/__________________________________________/ */

          --damask-border: url('https://decemberseas.com/assets/images/damask-border.svg');
          --damask-border-dark: url('https://decemberseas.com/assets/images/damask-border_dark.svg');
            /*______________________________________________
              /\                                            \
              \_|  art by GarryKillian @ Freepik             |
                |                                            |
                |  <https://www.freepik.com/free-vector/     |
                |   classic-damask-border-background_        |
                |   7941101.htm>                             |
                |                                            |
                |  license: Freepik Premium                  |
                |                                            |
                |  <https://decemberseas.com/assets/        |
                |   images/damask-border_license-classic-    |
                |   damask-border-background-7941101.pdf>    |
                |   _________________________________________|__
                \_/____________________________________________/ */

          --endpaper: url('https://decemberseas.com/assets/images/endpaper.svg');

            /*______________________________________________
              /\                                            \
              \_|  art by GarryKillian @ Freepik             |
                |                                            |
                |  <https://www.freepik.com/free-vector/     |
                |   vector-damask-seamless-pattern-element-  |
                |   classical-luxury-old-fashioned-damask-   |
                |   ornament-royal-victorian-seamless-       |
                |   texture-wallpapers-textile-wrapping-     |
                |   exquisite-floral-baroque-template_       |
                |   27449766.htm>                            |
                |                                            |
                |  license: Freepik Premium                  |
                |                                            |
                |  <https://decemberseas.com/assets/        |
                |   images/endpaper_license-vector-damask-   |
                |   seamless-pattern-element-classical-      |
                |   luxury-old-fashioned-damask-ornament-    |
                |   royal-victorian-seamless-texture-for-    |
                |   wallpapers-textile-wrapping-exquisite-   |
                |   floral-baro.pdf>                         |
                |   _________________________________________|__
                \_/____________________________________________/ */

          --ornate-frame: url('https://decemberseas.com/assets/images/ornate-frame.png');

            /*______________________________________________
              /\                                            \
              \_|  art by GarryKillian @ Freepik             |
                |                                            |
                |  <https://www.freepik.com/free-vector/     |
                |   vector-invitation-cards-with-ethnic-     |
                |   arabesque-elements_9505455.htm>          |
                |                                            |
                |  license: Freepik Premium                  |
                |                                            |
                |  <https://decemberseas.com/assets/        |
                |   images/ornate-frame_license-vector-      |
                |   invitation-cards-with-ethnic-arabesque-  |
                |   elements-9505455.pdf>                    |
                |   _________________________________________|__
                \_/____________________________________________/ */

          --pearls: url('https://decemberseas.com/assets/images/pearls.png');
          --pearls-dark: url('https://decemberseas.com/assets/images/pearls_dark.png');

            /*______________________________________________
              /\                                            \
              \_|  art by olly2polly @ Freepik               |
                |                                            |
                |  <https://www.freepik.com/premium-vector/  |
                |   pearl-wavy-string-borders-isolated-gray- |
                |   background_5536349.htm>                  |
                |                                            |
                |  license: Freepik Premium                  |
                |                                            |
                |  <https://decemberseas.com/assets/        |
                |   images/pearls_license-pearl-wavy-string- |
                |   borders-isolated-on-gray-background-     |
                |   5536349.pdf>                             |
                |   _________________________________________|__
                \_/____________________________________________/ */
          
  }


  body {
    background-color: var(--droplets);
    background-image: var(--marble);
  }

  @media (prefers-color-scheme: dark) {
    body {
      background-color: var(--abyssal);
      background-image: var(--asphalt);
    }
  }

  hr {
    border: none;
    background-image: var(--flourish);
    background-position: center;
    width: 200px;
    height: 20px;
    margin: 2rem auto;
    background-repeat: no-repeat;
    background-size: contain;
  }

  @media only screen and (min-width: 768px) {
    hr {
      height: 25px;
    }
  }

  @media only screen and (min-width: 1280px) {
    hr {
      height: 30px;
    }
  }

  .pearls {
    background-image: var(--pearls);
    width: 100%;
    height: 80px;
    background-size: contain;
    background-repeat: repeat-x;
    margin: 4rem auto;
  }

  @media (prefers-color-scheme: dark) {
    .pearls {
      background-image: var(--pearls-dark);
    }
  }

/*---------------------------------------------------------------------------*
  [ds-type]    TYPOGRAPHY
               Set text appearance throughout the site.
 *---------------------------------------------------------------------------*/

  body {
    background-color: var(--droplets);
    font: 500 var(--font-size)/var(--line-height) var(--slab-serif);
    color: var(--brine);
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 2rem 0 1rem 0;
  }

  h1 {
    font: 600 calc(var(--font-size) * 2)/var(--line-height) var(--serif);
    color: var(--searulean);
  }

  h2 {
    font: 600 calc(var(--font-size) * 1.6)/var(--line-height) var(--serif);
    color: var(--submerged);
  }

  h3 {
    font: 600 calc(var(--font-size) * 1.2)/var(--line-height) var(--serif);
    color: var(--abyssal);
  }

  h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  h4 {
    font: 700 var(--font-size)/var(--line-height) var(--sans-serif);
    color: var(--searulean);
  }

  h5 {
    font: 700 calc(var(--font-size) * 0.8)/var(--line-height) var(--sans-serif);
    color: var(--abyssal);
  }

  h6 {
    font: 700 calc(var(--font-size) * 0.7)/var(--line-height) var(--sans-serif);
    color: var(--brine);
  }

  #content .archive-header {
    text-align: center;
    margin-bottom: 4rem;
    font-weight: normal;
    font-style: italic;
    font-family: var(--slab-serif);
    letter-spacing: 0px;
    text-transform: none;
  }

  @media (prefers-color-scheme: dark) {
    #content .archive-header {
      color: var(--lace-veil);
    }
  }

  .icon {
    padding: 8px;
  }

  .image-description {
    margin: 1rem auto;
    font: 400 italic 1rem/1.6 var(--slab-serif);
    opacity: 0.8;
  }

  .separator-bullet::after {
    content: '\2022'; /* &bull; */
    display: inline-block;
    padding: 0 3px;
    margin: 0 3px;
  }

  .separator-right-carat::after {
    content: '\e907'; /* icon-angle-right */
    font-family: 'december-seas-icons';
    display: inline-block;
    padding: 0 3px;
    margin: 0 3px;
  }

  .erotica dt {
    font-size: larger;
  }

  .erotica dd {
    margin-top: 0.5rem;
    margin-bottom: 3rem;
    font-size: smaller;
  }

  .type {
    background-color: var(--translucent);
    color: var(--seafoam);
    display: inline-block;
    font: 700 1rem/1 var(--sans-serif);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 5px;
    margin-left: 1rem;
  }
  
  .erotica .meta {
    font-size: 1rem;
    font-style: italic;
    padding-left: 1rem;
  }

/*---------------------------------------------------------------------------*
 [ds-btn]    BUTTONS
             Set default button styles.
 *---------------------------------------------------------------------------*/

  .button {
    font: 700 smaller/1 var(--sans-serif);
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: var(--submerged);
    color: var(--seafoam);
    padding: 6px;
    margin: 0 3px;
    text-decoration: none;
    border-radius: 5px;
  }

  #content .button:hover, #content .button:focus, #content .button:active {
    background-color: var(--searulean);
    color: var(--droplets);
  }

  .comments {
    text-align: center;
    margin: 2rem auto;
  }

  #content .comments .button {
    margin: 1.2rem auto;
    font-size: 1rem;
    padding: 10px 1.2rem;
    text-decoration: none;
  }

/*----------------------------------------------------------------------------*
 [ds-callout]    CALLOUTS
                 Informational blockquotes and other marked elements
 *---------------------------------------------------------------------------*/

  #content .explore-context {
    background-color: var(--droplets);
    padding: 20px 20px 20px 80px;
    border-radius: 15px;
    border: 2px solid var(--lace-veil);
    font-size: smaller;
    background-image: var(--fleur-de-lis);
    background-position: left 20px top calc(20px + 1.5rem + 15px);
    background-repeat: no-repeat;
    background-size: 40px;
    position: relative;
    margin-bottom: 4rem;
  }

  #content .explore-context p + p {
    margin-top: 1.6rem;
  }
  
  #content .explore-context::before {
    content: '\e935';
    font-family: 'december-seas-icons';
    position: absolute;
    font-size: 1.5rem;
    left: calc(40px - 0.75rem);
    top: 20px;
    color: var(--seven-seas);
  }

  @media only screen and (max-width: 400px) {
    /* move decorations to top so column doesn't become too skinny for users with text zoomed in */
    #content {
      padding: 40px 10px !important;
    }

    #content .explore-context {
      width: 100%;
      padding: calc(50px + 2rem + 20px) 10px 40px 10px;
      background-position: top calc(10px + 40px) center;
    }

    #content .explore-context::before {
      top: 10px;
      left: calc(50% - 0.75rem);
    }
  }

  #content .explore-context ul {
    margin-bottom: 0;
  }
  
  @media only screen and (min-width: 768px) {
    #content .explore-context {
      padding: 40px 40px 40px 100px;
      background-position: left 30px top calc(40px + 1.5rem + 20px);
    }
  
    #content .explore-context::before {
      top: 40px;
      left: calc(50px - 0.75rem);
    }
  }
  
  @media (prefers-color-scheme: dark) {
    #content .explore-context {
      background-color: var(--nocturne);
      border-color: var(--seven-seas);
    }

    #content .explore-context a {
      color: var(--lace-veil);
    }
  
    #content .explore-context::before {
      color: var(--seven-seas);
    }
  }

  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    #content .explore-context {
      color: var(--seafoam);
    }
  }

/*----------------------------------------------------------------------------*
 [ds-attr]    ASSET ATTRIBUTION MODAL
              Derived from "Basic CSS-Only Modal" by Timothy Long
              <https://codepen.io/timothylong/pen/AJxrPR>
 *---------------------------------------------------------------------------*/

  .attribution {
      text-align: center;
  }

  #content .attribution-open {
      display: block;
      width: min-content;
      margin: 0 auto;
      color: var(--crystalline);
      font: 700 0.9rem/1 var(--sans-serif);
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
      z-index: 3;
  }

  @media only screen and (max-width: 768px) {
    .attribution-open {
      font-size: 0.7rem;
    }
  }

  #content .attribution-open:hover, #content .attribution-open:focus {
      color: var(--sea-salt);
  }

  #content .attribution-close:hover, #content .attribution-close:focus {
      color: var(--abyssal);
  }

  #content .attribution-open:hover, #content .attribution-open:focus,
  #content .attribution-close:hover, #content .attribution-close:focus {
    transition: color 0.3s;
    background-color: transparent;
  }


  #content .attribution-open:focus, #content .attribution-close:focus {
    outline: 2px solid var(--sea-salt);
  }

  .attribution-modal {
      position: fixed;
      background-color: rgba(0, 0, 0, 0.5);
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 999;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s;
      color: #333333;
  }

  @media (prefers-reduced-motion: reduce) {
    .attribution-modal {
      transition: none;
    }
  }

  .attribution-modal:target {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
  }

  .attribution-modal div {
      width: 400px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 2.5rem 2rem 2rem 2rem;
      background-color: var(--droplets);
      border-radius: 5px;
  }

  .attribution-modal .license {
    font: 400 italic smaller/1 var(--slab-serif);
    display: block;
    margin-top: 5px;
  }

  .attribution-modal .license::before {
    content: '\e954';
    font-family: 'december-seas-icons';
    font-style: normal;
    color: var(--sea-salt);
    display: inline-block;
    margin-right: 3px;
  }

  #content .attribution-modal a:focus, #content .attribution-modal a:active {
      color: var(--nocturne) !important;
  }

  @media only screen and (min-width: 768px) {
    .attribution {
      font-size: smaller;
    }
  }

  #content .attribution-close {
      position: absolute;
      right: 10px;
      top: 10px;
      color: var(--sea-salt);
      font: 700 0.8rem/1 var(--sans-serif);
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
  }

/*'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``

[ds-ux]    UX ELEMENTS
           Styling for UX features, such as accessibility tools.

``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'*/

/*---------------------------------------------------------------------------*
 [ds-skip]    SKIP LINK
              Derived from "Accessible skip-to-content link for desktop and
              mobile" by Mike Foskett <https://codepen.io/2kool2/pen/bxdzEJ>
 *---------------------------------------------------------------------------*/

  .skip-link {
    position: absolute;
    padding: 10px 1.2rem;
    color: var(--droplets);
    background-color: var(--abyssal);
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    width: auto;
    text-align: center;
    transform: translate3d(calc(50vw - 5rem - 0.125rem), -5rem, 0);
    transition: transform .3s ease-out;
    z-index: 100;
  }

  .skip-link:focus {
    transform: translate3d(calc(50vw - 5rem - 0.125rem), .125rem, 0);
    outline: var(--seafoam) var(--focus-outline);
  }

  @media (prefers-reduced-motion: reduce) {
    .skip-link {
      transition: none;
    }
  }

  @media print {
    .skip-link {
      display: none;
    }
  }

/*---------------------------------------------------------------------------*
 [ds-totop]    RETURN TO TOP BUTTON
               Sends user back to top of page by activating skip link
 *---------------------------------------------------------------------------*/

  #return-to-top {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 2;
  }

  #return-to-top a {
    display: block;
    width: 2rem;
    height: 2rem;
    text-align: center;
  }

  #return-to-top a:focus {
    outline: var(--droplets) var(--focus-outline);
  }

  #return-to-top .icon {
    padding: 0;
  }

  #return-to-top .label-icon {
    display: none;
  }

  @media print {
    #return-to-top {
      display: none;
    }
  }

  @media (prefers-color-scheme: dark) {
    #return-to-top a {
      background-color: var(--nocturne);
    }

    #return-to-top a:hover, #return-to-top a:focus {
      background-color: var(--searulean);
      color: var(--seafoam);
    }
  }

/*'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``

[ds-layout]    LAYOUT
               Defining and styling page sections and how they are placed.

``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'``'-.,_,.='``'-.,_,.-'*/

/*---------------------------------------------------------------------------*
 [ds-parts]    TEMPLATE PARTS
               Define page divisions
 *---------------------------------------------------------------------------*/

/*   +----------------------------------+
+----|             HEADER               |----+
 \   |   Appears at top of all pages    |   /
 /   +----------------------------------+   \
+------'                             '------*/

  #global-header {
    width: 100%;
    font-size: smaller;
    background-color: var(--seafoam);
    background-image: var(--linear-wave);
    background-size: 75vw;
    background-position: top 80% left -50%;
    background-repeat: repeat-x;
    color: var(--brine);
    display: flex;
    flex-flow: column;
    padding: 20px 10px;
    box-shadow: 0px 5px 5px #00000010;
    z-index: 10;
  }

  @media (prefers-color-scheme: dark) {
    #global-header {
      background-image: var(--linear-wave-dark);
    }
  }

  @media only screen and (min-width: 768px) {
    /* Make header sticky on larger screens */
    #global-header {
      position: sticky;
      top: 0;
    }
  }

  #global-header .to-home {
    display: block;
    width: max-content;
    height: auto;
    margin-top: 5px;
  }

  #global-header .signature {
    margin: 5px auto;
  }

  /*   +----------------------------------+
  +----|             SEARCH               |----+
   \   |    Algolia interface to come     |   /
   /   +----------------------------------+   \
  +------'                             '------*/

  #search {
    display: none;
    /* display: flex; */
    justify-content: center;
    padding: 10px 0;
    width: 100%;
  }

  .label-search {
    display: none;
  }

  #search input {
    border: 2px solid var(--lighthouse);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: var(--font-size);
  }

  #search button {
    margin-left: 5px;
    background-color: var(--searulean);
    color: var(--droplets);
    font: 700 smaller/1 var(--sans-serif);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 5px;
  }

/*   +------------------------------------+
+----|            PAGE TITLE              |----+
 \   |  Permalink banner before content   |   /
 /   +------------------------------------+   \
+------'                                '------*/

/* .permalink and #page-title on Nanoc; [data-banner-layout] to select Astra header */
  .permalink, [data-banner-layout] {
    width: 100%;
    background-image: var(--seigaiha);
  }

  #page-title, [data-banner-layout] h1 {
    text-align: center;
    margin: 0 auto;
    padding: 2rem 0;
    color: var(--droplets);
  }

  #page-title a, [data-banner-layout] h1 a {
    color: currentColor;
    background-color: transparent;
  }

  .page-description {
    margin-top: -2rem;
    margin-bottom: -1rem;
    text-align: center;
    padding: 0 2rem 3rem 2rem;
    font: 500 italic calc(var(--font-size) * 0.8)/var(--line-height) var(--slab-serif);
    color: var(--seafoam);
  }

  @media only screen and (min-width: 768px) {
    .page-description {
      width: 80%;
      margin: -2rem auto 0 auto;
    }
  }

  @media only screen and (min-width: 1280px) {
    .page-description {
      width: 60%;
      margin: -2rem auto 0 auto;
    }
  }

/*   +----------------------------------+
+----|          BREADCRUMBS             |----+
 \   |        Page navigation           |   /
 /   +----------------------------------+   \
+------'                             '------*/

/* .breadcrumbs-list used by Nanoc, .trail-items used by Astra */

  .breadcrumbs {
    background-color: var(--lace-veil);
    background-image: var(--polaroid);
    border-bottom: 2px solid var(--lighthouse);
    color: var(--brine);
    height: min-content;
  }

  .breadcrumbs-list, .trail-items {
    font: 400 calc(var(--font-size) * 0.6)/var(--line-height) var(--sans-serif);
    color: var(--brine);
    text-transform: uppercase;
    padding: 8px 16px;
    list-style: none;
    text-align: center;
  }

  .breadcrumbs-list a:hover, .breadcrumbs-list a:focus,
  .trail-items a:hover, .trail-items a:focus {
    text-decoration: none;
  }

  .breadcrumbs-list li:first-child::before,
  .trail-items li:first-child::before {
    content: '\e975';
    font-family: 'december-seas-icons';
    font-size: smaller;
    margin-right: 10px;
    color: var(--seven-seas);
  }
  
  .breadcrumbs-list li,
  .trail-items li {
    display: inline;
    width: min-content;
  }
  
  .breadcrumbs-list li + li::before,
  .trail-items li + li::before {
    padding: 8px;
    color: var(--sea-salt);
    content: "/\00a0";
  }

  .breadcrumbs-list .alt-name {
    font-weight: bold;
  }

  @media (prefers-color-scheme: dark) {
    .breadcrumbs {
      background-color: var(--abyssal);
      background-image: var(--nami);
      border-bottom: 2px solid var(--abyssal);
      color: var(--seafoam);
    }

    .breadcrumbs-list, .trail-items {
      color: var(--lace-veil);
    }

    .breadcrumbs-list li:first-child::before,
    .trail-items li:first-child::before {
      color: var(--searulean);
    }

    .breadcrumbs-list a,
    .trail-items a {
      color: var(--seven-seas);
    }
  }

/*   +----------------------------------+
+----|            CONTENT               |----+
 \   |     Primary body container       |   /
 /   +----------------------------------+   \
+------'                             '------*/

  #content {
    padding: 2rem 2rem 4rem 2rem;
  }

  @media only screen and (min-width: 768px) {
    #content {
      padding: 4rem 4rem 8rem 4rem;
    }
  }

  #content p + p {
    margin-top: 1.6rem;
  }

/*   +----------------------------------+
+----|             FOOTER               |----+
 \   |        Site footer block         |   /
 /   +----------------------------------+   \
+------'                             '------*/

  #global-footer {
    border-top: 2px solid var(--droplets);
  }

  @media (prefers-color-scheme: dark) {
    #global-footer {
      border-color: var(--abyssal); 
    }
  }

/*   +----------------------------------+
+----|        FOOTER LINKS OUT          |----+
 \   |     Links to external pages      |   /
 /   +----------------------------------+   \
+------'                             '------*/

  #links-out {
    background-color: var(--searulean);
    background-image: var(--seigaiha);
    color: var(--droplets);
    padding: 40px 10px;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
  }

  @media only screen and (min-width: 1280px) {
    #links-out {
      border-bottom: none;
    }
  }

  #links-out .signature-white {
    width: 240px;
    height: 42px;
    margin: 10px auto;
  }

/*   +----------------------------------+
+----|      FOOTER INTERNAL LINKS       |----+
 \   |       Links to site pages        |   /
 /   +----------------------------------+   \
+------'                             '------*/

  #internal-links {
    background-color: var(--seafoam);
    color: var(--abyssal);
    padding: 10px;
    text-align: center;
  }

  .policies, .contact, .mini-nav {
    margin: 2rem 10px;
  }

  .policies .label-menu, .contact .label-menu, .mini-nav .label-menu {
    margin-bottom: 1.2rem;
  }

  #site-copyright {
    font: 400 italic calc(0.7 * var(--font-size))/1.6 var(--slab-serif);
    padding: 1rem;
    background-color: var(--submerged);
    color: var(--seafoam);
    text-align: center;
  }

  #site-copyright a {
    color: var(--seafoam);
  }

/*---------------------------------------------------------------------------*
 [ds-menus]    MENUS
               Styling various navigation elements
 *---------------------------------------------------------------------------*/

/*               \ | / 
              _ _     _ _
  _.'--.._
 / /  \ \ \      / | \
| _| .-:_v-:            .---------.
:/-v` \\ '   ()()       [ ACTIONS ]
`      \\   ( . .)      '----+----'
_.-._.-.\\.o(_(")")_.-._.-._.|_.-._.-._.-
 .     .      _ .
  :     ~                 .     v .. v
    *                 @     .  _=(__)=_ */

  .menu-actions {
    display: flex;
    list-style-type: none;
  }

  .menu-dropdown.account {
    padding: 0 10px;
  }

  .menu-dropdown.account li {
    padding: 10px 0;
  }

  .menu-dropdown.account .icon {
    color: var(--seven-seas);
  }

  .menu-dropdown.account .menu-item {
    display: flex;
    flex-flow: row;
  }

  .account.submenu-items > li + li {
    border-top: 2px solid var(--genteal);
  }

  .menu-actions .cart {
    position: relative;
  }

  #cart-count {
    display: inline-block;
    background-color: var(--searulean);
    color: var(--droplets);
    border-radius: 50%;
    position: absolute;
    top: -15px;
    left: 18px;
    font-size: 9px;
  }

/*               \ | / 
              _ _     _ _
  _.'--.._
 / /  \ \ \      / | \
| _| .-:_v-:            .--------.
:/-v` \\ '   ()()       [ SOCIAL ]
`      \\   ( . .)      '----+---'
_.-._.-.\\.o(_(")")_.-._.-._.|_.-._.-._.-
 .     .      _ .
  :     ~                 .     v .. v
    *                 @     .  _=(__)=_ */

  .menu-social {
    display: flex;
    list-style-type: none;
  }

  .menu-social .icon {
    color: var(--droplets);
    padding: 3px;
    font-size: smaller;
  }

  .menu-social .icon:focus {
    color: var(--seafoam);
    outline: var(--droplets) var(--focus-outline);
  }

  .menu-social .icon:hover, .menu-social .icon:focus, .menu-social .icon:active {
    color: var(--seafoam);
  }

  .menu-social .label-icon {
    display: none;
  }

  #links-out .menu-social {
    justify-content: center;
    margin: 10px auto;
  }

  #links-out .menu-social .icon {
    font-size: var(--font-size);
  }

/*               \ | / 
              _ _     _ _
  _.'--.._
 / /  \ \ \      / | \
| _| .-:_v-:            .---------.
:/-v` \\ '   ()()       [ PRIMARY ]
`      \\   ( . .)      '----+----'
_.-._.-.\\.o(_(")")_.-._.-._.|_.-._.-._.-
 .     .      _ .
  :     ~                 .     v .. v
    *                 @     .  _=(__)=_ */

  .menu-primary {
    font: 700 smaller/2 var(--sans-serif);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    list-style-type: none;
    text-align: center;
    margin-top: 1rem;
  }

  .menu-primary .menu-item {
    margin: 3px;
  }

  .menu-item-link, .menu-item .active {
    padding: 3px 10px;
  }

  .label-menu .icon-angle-down {
    font-weight: bold;
    padding: 0 3px;
    position: relative;
    top: 1px;
    color: var(--sea-salt);
  }

  .wrapper-menu-dropdown {
    padding-top: calc(var(--font-size) - 2px);
    background-color: transparent;
    display: none;
    margin: 0;
    position: absolute;
  }

  @media only screen and (min-width: 1280px) {
    .wrapper-menu-dropdown {
      padding-top: 1.3rem;
    }
  }

  .wrapper-menu-dropdown.explore {
    width: 100%;
    left: 0;
  }

  .wrapper-menu-dropdown.account {
    width: max-content;
  }

  .menu-dropdown {
    width: 100%;
    list-style-type: none;
    box-shadow: 0px 5px 5px #00000070;
    background-color: var(--searulean);
    color: var(--droplets);
    padding: 30px 10px;
    position: relative;
    z-index: 69;
  }

  .menu-dropdown.account {
    position: relative;
    left: -2rem;
    background-color: var(--seafoam);
  }

  @media only screen and (min-width: 768px) and (max-width: 1279px) {
    .wrapper-menu-dropdown.explore {
      padding-top: 1.4rem;
    }
  }

  .menu-item-link.featured {
    background-color: var(--genteal);
    border: 2px solid var(--droplets);
    color: var(--droplets);
  }

  @media (prefers-color-scheme: dark) {
    .menu-item-link.featured {
      border-color: var(--nocturne);
    }
  }

  .menu-item-link.featured:hover, .menu-item-link.featured:focus {
    background-color: var(--searulean);
  }

  .menu-dropdown.account {
    background-color: var(--nocturne);
  }

/*               \ | / 
              _ _     _ _
  _.'--.._
 / /  \ \ \      / | \
| _| .-:_v-:            .---------.
:/-v` \\ '   ()()       [ EXPLORE ]
`      \\   ( . .)      '----+----'
_.-._.-.\\.o(_(")")_.-._.-._.|_.-._.-._.-
 .     .      _ .
  :     ~                 .     v .. v
    *                 @     .  _=(__)=_ */

  .menu-dropdown.explore {
    display: grid;
    grid: [row1-start] "entertainment browse" auto [row1-end]
    [row2-start] "informational browse" auto [row2-end]
    / 1fr 1fr;
    gap: 20px;
  }

  @media only screen and (min-width: 1280px) {
    .menu-dropdown.explore {
      grid: [row1-start] "entertainment informational browse" max-content [row1-end]
            / 1fr 1fr 2fr;
      gap: 20px;
    }

    .menu-browse .submenu-items {
      column-count: 3;
    }
  }

  .menu-dropdown .submenu-items {
    list-style-type: none;
  }

  .explore .label-menu {
    display: block;
    margin: 10px auto;
    font: 600 var(--font-size)/1.2 var(--serif);
    text-transform: none;
    letter-spacing: 0;
    padding-bottom: 10px;
  }

  .menu-dropdown.explore .menu-browse {
    border-left: 2px solid var(--genteal);
  }

  @media only screen and (min-width: 1280px) {
    .menu-dropdown.explore > li + li {
      /* Redraw borders to match grid */
      border-left: 2px solid #007070;
    }
  }

  .submenu-items .menu-item-link {
    display: block;
    font: 400 calc(var(--font-size) * 0.8)/1.2 var(--slab-serif);
    background-color: transparent;
    width: max-content;
    margin: 3px auto;
    color: var(--seafoam);
    text-transform: none;
    letter-spacing: 0;
  }

  .submenu-items .menu-item-link:hover,
  .submenu-items .menu-item-link:active {
    text-decoration: underline;
  }

  .menu-dropdown .menu-item-link:focus {
    outline: var(--seven-seas) var(--focus-outline);
  }

  .menu-entertainment {
    grid-area: entertainment;
  }

  .menu-informational {
    grid-area: informational;
  }

  .menu-browse {
    grid-area: browse;
  }

  .label-menu:hover .wrapper-menu-dropdown,
  .label-menu:focus-within .wrapper-menu-dropdown {
    display: block;
  }

/*               \ | / 
              _ _     _ _
  _.'--.._
 / /  \ \ \      / | \
| _| .-:_v-:            .----------.
:/-v` \\ '   ()()       [ POLICIES ]
`      \\   ( . .)      '----+-----'
_.-._.-.\\.o(_(")")_.-._.-._.|_.-._.-._.-
 .     .      _ .
  :     ~                 .     v .. v
    *                 @     .  _=(__)=_ */

  .menu-policies, .menu-contact, .menu-mini-nav {
    list-style-type: none;
    font: 500 smaller/2 var(--slab-serif);
  }

/*               \ | / 
              _ _     _ _
  _.'--.._
 / /  \ \ \      / | \
| _| .-:_v-:            .---------.
:/-v` \\ '   ()()       [ CONTACT ]
`      \\   ( . .)      '----+----'
_.-._.-.\\.o(_(")")_.-._.-._.|_.-._.-._.-
 .     .      _ .
  :     ~                 .     v .. v
    *                 @     .  _=(__)=_ */

  .menu-contact .icon {
    color: var(--searulean);
  }

/*---------------------------------------------------------------------------*
 [ds-grid]    GRIDS
              Define grids based on viewport size
 *---------------------------------------------------------------------------*/

/*                          *   .        ,
                               /\  ,_ ,=/|  :
                        .      \_`=  v   /
   .o0o. TABLET .o0o.            \__  ,_/
                           ., _=     \ \ _._  -=_..
    _       __      ..      __  .  = |  \  .,   .  __
.,/`(_`_.,/`(_`_.,/`(_`_.,/`(_`_,.=./    |-._.-.,/`(_`_*/

  @media only screen and (min-width: 768px) {
    #global-header {
      display: grid;
      grid: [row1-start] "signature . nav ." max-content [row1-end]
            [row2-start] "signature . . ." max-content [row2-end] /* change to "search search search search" once implemented */
            / 200px 20px auto 50px;
    }

    .signature {
      grid-area: signature;
      display: flex;
      align-items: center;
      padding-bottom: 20px;
    }

    .menu {
      grid-area: nav;
      padding-top: 3px;
      display: flex;
      flex-flow: column;
      place-items: end stretch;
    }

    .menu-actions {
      margin-top: 10px;
    }

    .menu-dropdown.account {
      margin-top: -2px;
    }

    #search {
      grid-area: search;
    }

    #global-header .signature {
      margin: 0 auto;
    }

    .menu-primary.navigation {
      justify-content: start;
      align-content: center;
      margin-top: 0;
    }

    .menu-primary.actions {
      display: flex;
      flex-flow: row wrap;
      justify-content: end;
      align-content: center;
      margin-top: 0;
    }

    #internal-links {
      display: grid;
      grid: /* [row1-start] "policies contact" max-content [row1-end] */ /* uncomment to enable contact menu */
            [row2-start] "policies mini-nav" max-content [row2-end]
            / 1fr 1fr;
    }

    .policies {
      grid-area: policies;
    }

    .contact {
      grid-area: contact;
    }

    .mini-nav {
      grid-area: mini-nav;
    }
  }

/*                          *   .        ,
                               /\  ,_ ,=/|  :
                        .      \_`=  v   /
   .o0o. DESKTOP .o0o.           \__  ,_/
                           ., _=     \ \ _._  -=_..
    _       __      ..      __  .  = |  \  .,   .  __
.,/`(_`_.,/`(_`_.,/`(_`_.,/`(_`_,.=./    |-._.-.,/`(_`_*/

  @media only screen and (min-width: 1280px) {
    #global-header {
      display: grid;
      grid: [row1-start] ". signature . nav nav nav" max-content [row1-end] /* change last two "nav" to ". search" once implemented */
            / 40px 200px 20px 3fr 20px 1fr;
    }

    #global-header .signature {
      padding-top: 10px;
      padding-bottom: 0;
    }

    .menu {
      padding-bottom: 5px;
      display: grid;
      grid: [row1-start] "navigation . actions ." auto [row1-end]
            / auto 20px max-content 60px;
    }

    .menu-primary.navigation {
      grid-area: navigation;
    }

    .menu-primary.actions {
      grid-area: actions;
    }

    #content {
      width: 1000px;
      margin: 0 auto;
    }

    #global-footer {
      display: grid;
      grid: [row1-start] "links-out internal-links" max-content [row1-end]
            [row2-start] "copyright copyright" max-content [row2-end]
            / 1fr 3fr;
    }

    #links-out {
      grid-area: links-out;
    }

    #internal-links {
      grid-area: internal-links;
    }

    #site-copyright {
      grid-area: copyright;
    }
  }