/* =============================================================================
   SITE SETTINGS - wermus.now
   =============================================================================
   Edit these variables to change the look of the site.
   Open any page with ?tune in the URL to adjust values live.

   Phone-only values are in the html.narrow block at the bottom.
============================================================================= */

:root {
  /* -------------------------------------------------------------------------
     COLORS
     ------------------------------------------------------------------------- */
  --color-background: #000;               /* page background */
  --color-text: #EDE6DC;                  /* main text color */
  --color-dim: #8E887F;                   /* muted/secondary text */
  --color-rule: rgba(237, 230, 220, 0.16); /* borders and dividers */
  --color-link-hover: #fff;               /* link color on hover */
  --color-grid: rgba(237, 230, 220, 0.34); /* dot grid color (phones use a dimmer one, below) */
  --color-scrollbar: #222;                /* scrollbar thumb */
  --color-scrollbar-hover: #333;          /* scrollbar thumb on hover */

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-display: "Unbounded", "Arial Black", sans-serif;  /* headings, `` */
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;  /* body text */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;  /* code, version numbers */

  --text-body-size: 15px;                 /* base body text size */
  --text-body-line-height: 1.2;          /* body line height */
  --text-link-underline-offset: 4px;      /* underline distance from text */

  /* -------------------------------------------------------------------------
     SECTION HEADINGS (CONTACT, etc.)
     ------------------------------------------------------------------------- */
  --heading-size: clamp(44px, 9vw, 120px); /* section heading size (e.g. CONTACT) */
  --heading-weight: 300;                  /* section heading weight */
  --heading-line-height: 0.95;            /* section heading line height */
  --heading-letter-spacing: -0.04em;      /* section heading letter spacing */
  --heading-margin-bottom: 8px;          /* space below section heading */

  /* -------------------------------------------------------------------------
     PRODUCTS (GLOME, ISOBAR)
     ------------------------------------------------------------------------- */
  --product-title-size: 40px;           /* product name size */
  --product-title-weight: 500;            /* product name weight */
  --product-subtitle-size: 16px;          /* version/collab text size */
  --product-gap: 24px;                   /* space between product elements */
  --product-max-width: 900px;             /* maximum width of product canvas */

  /* -------------------------------------------------------------------------
     SAMPLE PACKS (archive_001, LIND)
     ------------------------------------------------------------------------- */
  --pack-title-size: 36px;                /* sample pack name size */
  --pack-title-weight: 500;               /* sample pack name weight */
  --pack-gap: 24px;                       /* space between pack elements */
  --pack-canvas-max-width: 400px;         /* sample pack canvas max width */

  /* -------------------------------------------------------------------------
     PRODUCT IMAGE STROKE (grey line along the edge of each product image)
     ------------------------------------------------------------------------- */
  --product-frame-color: rgba(237, 230, 220, 0.35); /* stroke color */
  --product-frame-border: 1px;            /* stroke thickness */
  --product-frame-pad: 0px;               /* space between the stroke and the image (0 = right on the edge) */
  --pack-art-inset: 5%;                   /* sample pack art sits this far inside its canvas (the "sample pack" text ring is around it) */

  /* -------------------------------------------------------------------------
     ROWS (music, release lists)
     ------------------------------------------------------------------------- */
  --row-name-size: 24px;                /* row title size */
  --row-name-weight: 500;                 /* row title weight */
  --row-padding: 20px;                    /* vertical padding per row */
  --row-gap: 24px;                        /* gap between name and meta */

  /* -------------------------------------------------------------------------
     SIGNUP FORM
     ------------------------------------------------------------------------- */
  --signup-max-width: 380px;             /* form maximum width */
  --signup-gap: 14px;                      /* gap between input and button */
  --signup-input-padding: 10px 12px;      /* input field padding */
  --signup-button-padding: 10px 18px;     /* button padding */
  --signup-message-margin-top: 8px;       /* space above status message */

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --page-padding: clamp(18px, 5vw, 64px); /* left/right page padding */
  --section-max-width: 900px;             /* content max width */
  --section-min-height: 80vh;             /* minimum section height */
  --section-padding-top: 12vh;            /* space above section content */
  --section-padding-bottom: 8vh;          /* space below section content */
  --first-product-space-top: calc(12vh - 28px); /* space above GLOME, under the top bar */
  --censor-blur: 16px;                    /* blur on products that aren't out yet (ISOBAR, LIND) */
  --scroll-margin-extra: 20px;         /* extra scroll offset for nav jumps */
  --contact-padding-bottom: var(--section-padding-bottom); /* space between the signup form and the footer */

  /* -------------------------------------------------------------------------
     TOP BAR
     ------------------------------------------------------------------------- */
  --bar-background: var(--color-background); /* bar background color */
  --bar-gap: 40px;                    /* gap between logo and nav */
  --bar-padding-top: 22px;                /* top bar vertical padding */
  --bar-padding-bottom: 26px;             /* top bar bottom padding (same as top) */
  --bar-fade-height: 20px;               /* gradient fade at bottom of bar */

  /* Logo (wermus) */
  --bar-logo-size: 21px;                 /* logo text size */
  --bar-logo-weight: 500;                 /* logo text weight */
  --bar-logo-offset-top: 2px;            /* logo vertical nudge */
  --bar-logo-offset-left: -8px;         /* logo horizontal nudge */

  /* Suffix (.now, .fx, etc.) */
  --bar-suffix-size: 17px;                /* suffix text size */
  --bar-suffix-color: var(--color-text);  /* suffix color when docked */
  --bar-suffix-color-nav: var(--color-dim); /* suffix color when at nav */

  /* Nav links */
  --bar-nav-size: 15px;                   /* nav link text size */
  --bar-nav-gap: 8px;                  /* gap between nav links */
  --bar-nav-color: var(--color-dim);      /* nav link color */
  --bar-nav-color-hover: var(--color-text); /* nav link hover color */

  /* -------------------------------------------------------------------------
     FOOTER
     ------------------------------------------------------------------------- */
  --footer-gap: 24px;                   /* gap between footer items */
  --footer-padding-bottom: 40px;         /* space below footer */

  /* -------------------------------------------------------------------------
     DOT GRID
     ------------------------------------------------------------------------- */
  --grid-step: 24px;                      /* distance between grid dots */
  --grid-dot-size: 1px;                   /* size of each grid dot */
}

/* =============================================================================
   PHONE-ONLY VALUES (viewport width 560px or less)
   =============================================================================
   These override the desktop values on narrow screens.
   Uses html.narrow class from device.js.
============================================================================= */

html.narrow {
  --grid-step: 16px;                      /* denser grid on phones */
  --color-grid: rgba(237, 230, 220, 0.25); /* dot color on phones */
  --censor-blur: 11px;                    /* smaller blur for smaller phone text */
  --pack-canvas-max-width: 210px;         /* smaller sample pack images */

  /* Top bar scales to fit - these are relative sizes */
  --bar-logo-size: 0.55em;                 /* logo scales with bar */
  --bar-logo-offset-top: -1px;           /* logo vertical nudge on phone */
  --bar-logo-offset-left: -6px;          /* logo horizontal nudge on phone */
  --bar-suffix-size: 0.45em;             /* suffix scales with bar */
  --bar-nav-size: 0.45em;                 /* nav scales with bar */
  --bar-nav-gap: 0.55em;                  /* tighter nav spacing */
  --bar-text-raise: 7px;                  /* raise logo, suffix and nav inside the bar (bar height stays the same) */
  --section-min-height: 0;                /* sections fit their content, so gaps between products are even */
  --section-padding-top: 6vh;             /* space above each section on phone */
  --section-padding-bottom: 4vh;          /* space below each section on phone */
  --contact-padding-bottom: 0px;          /* signup form sits closer to the footer */
  --product-title-size: 28px;             /* "GLOME x imagine plugins" fits on one line inside its box */
  --product-subtitle-size: 12px;
  --pack-title-size: 26px;

  --product-gap: 12px;
  --heading-margin-bottom: 16px;
  --pack-gap: 20px;
  --bar-padding-bottom: 30px;
}

/* =============================================================================
   DESKTOP PREVIEW ON A PHONE (wermus.now/?desktop)
   =============================================================================
   A phone held upright pretending to be 1440px wide has a very tall "screen", so
   spacing measured in vh would balloon. These are the desktop values above worked
   out for a typical 900px-tall laptop screen - keep them in step if you change those.
============================================================================= */

html.desktop-preview {
  --section-min-height: 720px;            /* 80vh */
  --section-padding-top: 108px;           /* 12vh */
  --section-padding-bottom: 72px;         /* 8vh */
  --first-product-space-top: 80px;        /* 12vh - 28px */
}