/*****************************************************************************************************
* Setup CSS
******************************************************************************************************/

/* The custom properties and fonts of the theme. core/css/README.md explains
the breakpoint markers. */


/*
Colors
---------------------------------------------------------------------------------------------------- */

/* Color: Brand
--------------------------------------------- */

body {

  /* Internal */

  --brand1-color-def: #1b1a18;
  --brand1-color-acc: #8c2232;

  /* External */

  --brandAmazon-color-def: 255,153,0;
  --brandApple-color-def: 0,0,0;
  --brandBandcamp-color-def: 64,130,148;
  --brandBub-color-def: 23,159,20;
  --brandDeezer-color-def: 162,56,255;
  --brandFacebook-color-def: 8,102,255;
  --brandInstagram-color-def: 228,64,95;
  --brandLinkedin-color-def: 14,118,168;
  --brandNewsletter-color-def: 0,142,218;
  --brandRss-color-def: 238,128,47;
  --brandSoundcloud-color-def: 255,85,0;
  --brandSpotify-color-def: 30,215,96;
  --brandTwitter-color-def: 0,0,0;
  --brandYoutube-color-def: 255,0,0;
}


/* Color: Spot
--------------------------------------------- */

/* E.g. colors differing by category. */


/* Color: General
--------------------------------------------- */

body {

  /* Background: Body */

  /* Paper white, warm paper for tiles and bands, ink for text. The muted text
   color (acc) is #736d63 rather than a lighter grey, so small text keeps a
   contrast of 4.5:1 on white and on the warm paper. */

  --body-background-def: #fff;
  --body-background-lt1: #fff;
  --body-background-lt2: #fff;
  --body-background-dk1: #f6f3ee;
  --body-background-dk2: #ece7df;

  --body-color-def: #1b1a18;
  --body-color-lt1: #1b1a18;
  --body-color-dk1: #1b1a18;
  --body-color-acc: #736d63;

  /* Theme Background: Primary */

  /* Header, footer, menus and pagination: white with ink, as the header of
   the design. The template below sets a dark background image instead. Its
   path is absolute and contains the theme folder name: adjust it per
   project. A relative path is untested here, since inside a custom property
   its base may differ between browsers. */
  /* --theme1-background-def: #222 url('/wp-content/themes/septime/core/media/bg/dark-2.png'); */
  --theme1-background-def: #fff;
  --theme1-background-acc: #ece7df;

  --theme1-background-sh1: rgba(27,26,24,0.04);
  --theme1-background-sh2: rgba(27,26,24,0.08);

  --theme1-color-def: #1b1a18;
  --theme1-color-acc: #1b1a18;

  /* Theme Background: Secondary */

  /* Solid buttons in ink. */

  --theme2-background-def: #1b1a18;
  --theme2-background-lt1: #4a4640;
  --theme2-filter-acc: opacity(85%);

  --theme2-background-sh1: rgba(255,255,255,0.08);
  --theme2-background-sh2: rgba(255,255,255,0.12);

  --theme2-color-def: #fff;
  --theme2-color-acc: #fff;

  /* Theme Background: Tertiary */

  --theme3-background-def: #fff;
  --theme3-background-acc: #fbfbfb;

  --theme3-background-sh1: rgba(255,255,255,0.08);
  --theme3-background-sh2: rgba(255,255,255,0.12);

  --theme3-color-def: #444;
  --theme3-color-acc: #444;

  /* Background: Modal */

  --basicModal-background-def: #f6f3ee;
  --basicModal-background-acc: #f6f3ee;

  --basicModal-background-sh1: rgba(255,255,255,0.08);
  --basicModal-background-sh2: rgba(255,255,255,0.12);

  --basicModal-color-def: #1b1a18;
  --basicModal-color-acc: #4a4640;

  /* Background: Button */

  --groupButton-background-def: #fff;
  --groupButton-background-acc: #fbfbfb;
  
  --groupButton-color-def: inherit;
  --groupButton-color-acc: inherit;

  /* Background: List */

  --listItem-background-def: #fff;
  --listItem-background-acc: #fff;
  --listItem-background-odd: #f6f3ee;
  --listItem-background-even: #fff;

  --listItem-color-def: #1b1a18;
  --listItem-color-acc: #1b1a18;
  --listItem-color-odd: #1b1a18;
  --listItem-color-even: #1b1a18;
}


/*
Styles
---------------------------------------------------------------------------------------------------- */

body {

  /* Border Radius */

  --border-radius-def: 0;
}


/*
Fonts
---------------------------------------------------------------------------------------------------- */

/* Icon Fonts: Include
--------------------------------------------- */

/* Note: Some icon fonts may be enqueued via PHP (e.g. Dashicons, Font Awesome). */

/* Material Icons */

/* @font-face {
  font-family: 'Material Icons Outlined';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material-icons/material-icons-outlined-v109-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Material Icons Sharp';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material-icons/material-icons-sharp-v109-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Material Icons Twotone';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material-icons/material-icons-two-tone-v112-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Material Icons Regular';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material-icons/material-icons-v140-latin-regular.woff2') format('woff2');
} */

/* Bootstrap Icons */

/* @font-face {
  font-family: 'Bootstrap Icons';
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bootstrap-icons/fonts/bootstrap-icons.woff2') format('woff2');
} */


/* Text Fonts: Include
--------------------------------------------- */

/* Roboto */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto/roboto-v30-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto/roboto-v30-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto/roboto-v30-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto/roboto-v30-latin-500italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto/roboto-v30-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto/roboto-v30-latin-700italic.woff2') format('woff2');
}

/* Oswald */

@font-face {
  font-display: block;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald/oswald-v48-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/oswald/oswald-v48-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/oswald/oswald-v48-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/oswald/oswald-v48-latin-700.woff2') format('woff2');
}

/* EB Garamond and Hanken Grotesk, from fontsource 5.3.0. Each style comes in
   the latin and the latin-ext subset; the browser loads latin-ext only for a
   character in its range, such as the "ō" of a Japanese name. */

/* EB Garamond */

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/eb-garamond/eb-garamond-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/eb-garamond/eb-garamond-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/eb-garamond/eb-garamond-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/eb-garamond/eb-garamond-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/eb-garamond/eb-garamond-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/eb-garamond/eb-garamond-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk */

@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/hanken-grotesk/hanken-grotesk-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/hanken-grotesk/hanken-grotesk-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/hanken-grotesk/hanken-grotesk-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/hanken-grotesk/hanken-grotesk-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* All Fonts: Set
--------------------------------------------- */

body {

  /* Syntax: font-style font-variant font-weight font-size/line-height font-family */

  /* A sans for the interface, a serif for headings and, as the alt font, for
   reading text such as descriptions. */

  --basic-font-def: normal normal normal 1rem/1.6 'Hanken Grotesk', sans-serif;
  --alt-font-def: normal normal normal 1.25rem/1.6 'EB Garamond', serif;

  --display-font-def: normal normal normal 1.6rem/1.25 'EB Garamond', serif;
  --display-font-lg1: normal normal normal 1.75rem/1.25 'EB Garamond', serif;
  --display-font-sm1: normal normal normal 1.45rem/1.25 'EB Garamond', serif;

  /* Icon Fonts: Others may be enqueued via PHP and have their own variable names,
   e.g. Dashicons and Font Awesome (--fa-font-regular, --fa-font-sharp-regular,
   --fa-font-solid, --fa-font-brands etc.) */

  --mi-font-outlined: normal normal normal 1em/1 'Material Icons Outlined';
  --mi-font-sharp: normal normal normal 1em/1 'Material Icons Sharp';
  --mi-font-twotone: normal normal normal 1em/1 'Material Icons Twotone';
  --mi-font-regular: normal normal normal 1em/1 'Material Icons Regular';

  --bi-font-def: normal normal normal 1em/1 'Bootstrap Icons';
}

/* Phones: the reading text smaller, on pages, posts, people and events alike
   (user, 2026-10-18). */

@media screen and (max-width: 500px) {

  body {
    --alt-font-def: normal normal normal 1.125rem/1.6 'EB Garamond', serif;
  }
}