/* =====================================================================
   SUPERBLOOM! CREATIVE — rebuilt static site
   Faithful recreation of the original Koken "Chastain" theme.
   Design tokens extracted from the original site (colours, fonts, layout).
   You normally never need to edit this file — edit /data/content.js instead.
   ===================================================================== */

:root {
  --bg:            #ffffff;   /* page background           */
  --text:          #333333;   /* body text                 */
  --link:          #000000;   /* links                     */
  --accent:        #2c7fff;   /* album titles / headings (blue) */
  --footer-bg:     #ec8f00;   /* bottom nav bar (orange)   */
  --meta:          #777777;   /* captions / subtitles      */
  --header-h:      58px;      /* fixed header height        */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  text-align: center;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
}

img { vertical-align: bottom; max-width: 100%; height: auto; }

a, a:link, a:visited { color: var(--link); font-weight: 700; text-decoration: none; }
a:hover { color: var(--link); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-size: 1.1em;
  color: var(--accent);
  font-weight: 600;
  margin: 0;
}
h3, h4 { text-transform: uppercase; letter-spacing: 1px; }

/* ----------------------------- header ------------------------------ */
header.main {
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: .9em;
  letter-spacing: 1px;
  background: var(--bg);
}
header.main .inner { padding: 14px 10px; margin: 0 auto; }
header.main h1 {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 13px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--link);
}
header.main h1 a { color: var(--link); font-weight: 400; }
header.main h1 a:hover { text-decoration: none; }
.site_tagline {
  font-size: .85em;
  letter-spacing: 2px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 4px;
}

/* ----------------------------- layout ------------------------------ */
#outer { width: 100%; text-align: center; }
#container {
  margin: 0 auto;
  /* top padding clears the fixed header, bottom clears the fixed footer */
  padding: 110px 0 90px;
  position: relative;
  max-width: 1000px;
}
@media only screen and (min-width: 1440px) { #container { max-width: 1180px; } }

/* ------------------------- album cover list ------------------------ */
ul.content-list { padding: 0; margin: 0; list-style: none; }
ul.content-list li {
  margin: 0 0 80px;
  padding: 0;
  width: 100%;
  display: block;
  text-align: center;
}
.cover { display: block; padding: 0 5px; }
.cover img {
  margin: 0 auto;
  max-width: 100%;
  max-height: 800px;
  height: auto;
  display: block;
}
.img-caption { display: inline-block; margin-top: 12px; }
.img-caption h4 { font-size: 1.1em; }
.img-caption h4 a { color: var(--accent); font-weight: 600; }
.img-caption p {
  margin: .4em 0 0;
  color: var(--meta);
  font-weight: 400;
  font-size: .9em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --------------------------- text pages ---------------------------- */
article {
  text-align: left;
  margin: 0 auto 50px;
  max-width: 720px;
}
article header.page { text-align: center; margin-bottom: 2em; position: static; }
article h2 { color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: .8em; }
article p, article li { font-size: 15px; line-height: 1.7; }
article blockquote {
  font-style: italic;
  color: var(--meta);
  border-left: 3px solid var(--footer-bg);
  margin: 1.5em 0;
  padding: .2em 0 .2em 1.2em;
}
article blockquote cite { display: block; font-style: normal; font-weight: 700; color: var(--text); margin-top: .5em; }
.client-list { columns: 2; column-gap: 40px; list-style: none; padding: 0; text-align: left; }
.client-list li { font-size: 14px; color: var(--text); margin-bottom: .3em; break-inside: avoid; }

/* ----------------------- album interior pages ---------------------- */
.album-head { margin-bottom: 50px; }
.album-head h2 { color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-size: 1.3em; }
.album-head .album-sub { color: var(--meta); text-transform: uppercase; letter-spacing: 1px; font-size: .9em; margin-top: .4em; }
.gallery img {
  display: block;
  margin: 0 auto 80px;
  max-width: 100%;
  max-height: 800px;
  height: auto;
}
@media only screen and (max-width: 767px) { .gallery img { margin-bottom: 40px; } }

/* ----------------------------- footer ------------------------------ */
footer.main {
  width: 100%;
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  background: var(--footer-bg);
  padding: 6px 4px;
}
footer.main nav ul { margin: 0; padding: 0; list-style: none; }
footer.main nav li { display: inline-block; text-transform: uppercase; font-size: .82em; margin-right: 5px; letter-spacing: 1px; font-weight: 600; }
footer.main nav li:last-child { margin-right: 0; }
footer.main nav li a { padding: 2px 8px; color: var(--link); display: inline-block; }
footer.main nav li a:hover { text-decoration: none; }
footer.main nav li a.current { border: 2px solid var(--link); }

/* --------------------------- responsive ---------------------------- */
@media only screen and (max-width: 1024px) {
  #container { max-width: 728px; padding-left: 12px; padding-right: 12px; }
}
@media only screen and (max-width: 767px) {
  header.main { position: relative; }
  header.main h1 { font-size: 18px; letter-spacing: 6px; }
  #container { padding-top: 20px; padding-bottom: 80px; }
  ul.content-list li { margin-bottom: 40px; }
  footer.main { font-size: .9em; }
  footer.main nav li { margin-bottom: 2px; }
  .client-list { columns: 1; }
}