/*
Theme Name: Fluks
Theme URI: https://fluks.com
Description: Custom theme for Fluks digital journal
Version: 1.0
Author: Fluks
*/


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --link: #002FA7;
  --text: #111111;
  --bg: #ffffff;
  --border: #c8c4bc;
  --meta: #666660;
  --hover: #000000;
}

html, body { background-color: var(--bg); }

body {
  font-family: 'Times New Roman', Times, serif;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--hover); text-decoration: none; }

/* ── LAYOUT ── */
#wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

/* ── HEADER ── */
#header { padding-bottom: 12px; }

#header-rule {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-top: 1px solid #111;
  margin: 0;
}

#header-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

#title-line {
  display: block;
  max-width: 55%;
}

#site-title {
  font-family: 'Times New Roman', Times, serif;
  font-size: 2em;
  font-weight: normal;
  font-style: italic;
  letter-spacing: -0.03em;
  display: inline-block;
  color: var(--text) !important;
  text-decoration: none;
}
#site-title.hovered { color: var(--flux-color, #002FA7) !important; }
#site-title .name-fluks { display: inline; }
#site-title .name-flux  { display: none; }
#site-title:hover .name-fluks { display: none; }
#site-title:hover .name-flux  { display: inline; }
#site-title:hover { text-decoration: none; }

#tagline {
  font-style: normal;
  font-size: 0.85em;
  color: var(--meta);
  line-height: 1.4;
  margin-top: 1px;
  display: block;
}

/* ── NAV ── */
#nav {
  font-size: 0.95em;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2px 16px;
  text-align: right;
  align-items: end;
}
#nav a { color: var(--link); text-decoration: none; white-space: nowrap; }
#nav a:hover { color: var(--hover); }
#nav a.active { text-decoration: underline; text-underline-offset: 2px; color: var(--text); }
#nav a:nth-child(4) { grid-column: 2; grid-row: 2; }
#nav a:nth-child(5) { grid-column: 3; grid-row: 2; }

/* ── POST GRID ── */
#content {
  margin-top: 28px;
  column-count: 3;
  column-gap: 32px;
}

.post {
  break-inside: avoid;
  margin-bottom: 32px;
}

.post-title {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1em;
  font-weight: normal;
  line-height: 1.35;
  margin-bottom: 4px;
}
.post-title a { color: var(--text); text-decoration: none; }
.post-title a:hover { color: var(--link); }

.post-meta {
  font-size: 0.74em;
  color: var(--meta);
  margin-bottom: 7px;
}
.post-meta .author { color: var(--text); }
.post-meta .author::after { content: ', '; color: var(--meta); }
.post-meta .genre { color: var(--meta); }
.post-meta .date { color: var(--meta); }

.post-photo { margin-bottom: 8px; }
.post-photo img { max-width: 100%; display: block; border: 1px solid var(--border); }
.post-photo figcaption { font-style: italic; font-size: 0.74em; color: var(--meta); margin-top: 3px; }

.post-body { font-size: 0.88em; line-height: 1.6; }
.post-body p { margin-bottom: 0.8em; }

.post-keywords { margin-top: 8px; font-size: 0.72em; color: var(--meta); }
.post-keywords span.label { margin-right: 3px; }
.post-keywords a { color: var(--link); text-decoration: none; }
.post-keywords a:hover { color: var(--hover); }

/* ── SINGLE POST ── */
.single-post-wrap { max-width: 640px; margin: 0 auto; padding-top: 32px; }
.single-post-title {
  font-size: 1.4em;
  font-weight: normal;
  line-height: 1.3;
  margin-bottom: 8px;
}
.single-post-meta { font-size: 0.78em; color: var(--meta); margin-bottom: 20px; }
.single-post-meta .author { color: var(--text); }
.single-post-meta .author::after { content: ', '; }
.single-post-body { font-size: 0.95em; line-height: 1.7; }
.single-post-body p { margin-bottom: 1.2em; }
.single-post-body h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 1.5em 0 0.5em; }
.single-post-body blockquote { border-left: 2px solid var(--border); padding-left: 1em; margin: 1em 0; color: var(--meta); }
.single-post-keywords { margin-top: 24px; font-size: 0.78em; color: var(--meta); }
.single-post-keywords a { color: var(--link); }
.single-post-keywords a:hover { color: var(--hover); }

/* ── STATIC PAGES ── */
.page-wrap { max-width: 640px; margin: 0 auto; padding-top: 32px; }
.page-title { font-size: 1.2em; font-weight: normal; margin-bottom: 20px; }
.page-content { font-size: 0.95em; line-height: 1.7; }
.page-content p { margin-bottom: 1.2em; }
.page-content a { text-decoration: underline; }

/* ── KEYWORD INDEX ── */
.index-wrap { max-width: 800px; margin: 0 auto; padding-top: 32px; }
.index-title { font-size: 1.2em; font-weight: normal; margin-bottom: 20px; }
.index-letter { font-size: 0.78em; color: var(--meta); margin: 20px 0 6px; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.index-list { list-style: none; column-count: 3; column-gap: 24px; }
.index-list li { font-size: 0.9em; margin-bottom: 4px; }
.index-list a { color: var(--link); }
.index-list a:hover { color: var(--hover); }
.index-list .count { color: var(--meta); font-size: 0.85em; margin-left: 4px; }

/* ── SEARCH ── */
#search {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  margin-bottom: 28px;
}
#search input {
  font-family: 'Times New Roman', Times, serif;
  font-size: 0.78em;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
  padding: 2px 4px;
  width: 180px;
  text-align: center;
}
#search input::placeholder { color: var(--meta); }
#search input:focus { border-bottom-color: var(--text); }

/* ── PAGINATION ── */
.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  font-size: 0.82em;
  margin-top: 12px;
  margin-bottom: 28px;
}
.pagination a, .pagination span { color: var(--link); padding: 0 3px; }
.pagination a:hover { color: var(--hover); }
.pagination .current { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* ── CORNER TITLES ── */
.corner-title {
  position: fixed;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2em;
  font-weight: normal;
  font-style: normal;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.corner-title .name-fluks { display: inline; }
.corner-title .name-flux  { display: none; }
.corner-title:hover .name-fluks { display: none; }
.corner-title:hover .name-flux  { display: inline; }
.corner-title.hovered { color: var(--flux-color, #002FA7) !important; }
#corner-br { bottom: 24px; right: 28px; transform: scaleX(-1); }
#corner-bl { bottom: 24px; left: 28px; }
#corner-tr { top: 24px; right: 28px; transform: scaleX(-1); }

/* ── MARGIN LINE ── */
#margin-line {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #111;
  z-index: 999;
}

/* ── SCATTERED PHRASE ── */
.phrase {
  position: fixed;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2em;
  font-weight: normal;
  color: var(--text);
  background-color: #e0e0e0;
  letter-spacing: -0.03em;
  line-height: 1;
  pointer-events: none;
}
#phrase-a       { top: 24px; }
#phrase-ref     { top: 24px; left: 50%; transform: translateX(-50%); }
#phrase-for     { bottom: 24px; }
#phrase-fleeting { bottom: 24px; }



/* ── ABOUT PAGE ── */
.about-wrap {
      max-width: 580px;
      margin: 40px auto 0;
      position: relative;
    }

    /* Big faint F background */
    .about-bg-f {
      position: absolute;
      font-family: 'Times New Roman', Times, serif;
      font-weight: normal;
      font-size: 700px;
      line-height: 1;
      color: #FFFF00;
      opacity: 0.18;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -53%);
      pointer-events: none;
      user-select: none;
      z-index: 0;
      white-space: nowrap;
    }

    .about-box {
      border: 1px solid #111;
      padding: 22px 26px 26px;
      position: relative;
      z-index: 1;
      background: transparent;
    }

    .about-box p {
      font-size: 1.15em;
      line-height: 1.65;
      margin-bottom: 1.2em;
      text-align: justify;
    }
    .about-box p:last-child { margin-bottom: 0; }

    .inline-title { cursor: default; font-style: italic; }
    .inline-title .n-fluks { display: inline; }
    .inline-title .n-flux  { display: none; }
    .inline-title:hover .n-fluks { display: none; }
    .inline-title:hover .n-flux  { display: inline; }

    .s-word {
      display: inline-block;
      font-size: 1em;
      font-family: 'Times New Roman', Times, serif;
    }
    #sw-attention  { position: relative; top: 0px;  margin-right: 0.25em; }
    #sw-curiosity  { position: relative; top: 5px;  margin-right: 0.25em; }
    #sw-discovery  { position: relative; top: -4px; }

    .about-credit {
      display: block;
      text-align: right;
      margin-top: 1.2em;
      font-size: 1.15em;
      color: var(--text);
    }
    .about-email {
      color: var(--link);
    }
    .about-email:hover { color: var(--hover); }

/* ── SUBMISSIONS PAGE ── */
.sub-wrap {
      max-width: 580px;
      margin: 40px auto 0;
      position: relative;
    }

    .sub-bg-f {
      position: absolute;
      font-family: 'Times New Roman', Times, serif;
      font-weight: normal;
      font-size: 700px;
      line-height: 1;
      color: #FFFF00;
      opacity: 0.18;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -53%);
      pointer-events: none;
      user-select: none;
      z-index: 0;
      white-space: nowrap;
    }

    .sub-box {
      border: 1px solid #111;
      padding: 22px 26px 16px;
      position: relative;
      z-index: 1;
      background: transparent;
      margin-bottom: 0;
    }

    .sub-box p {
      font-size: 1.15em;
      line-height: 1.65;
      margin-bottom: 1.4em;
      text-align: justify;
    }

    /* Form box shares border, connects below text box */
    .sub-form-box {
      border: 1px solid #111;
      border-top: none;
      padding: 16px 26px 26px;
      position: relative;
      z-index: 1;
      background: transparent;
    }

    .form-row {
      margin-bottom: 18px;
    }
    .form-row:last-child { margin-bottom: 0; }

    .form-row label {
      display: block;
      font-size: 0.78em;
      color: var(--meta);
      margin-bottom: 4px;
      letter-spacing: 0.03em;
    }

    .form-row input[type="text"],
    .form-row input[type="email"],
    .form-row textarea {
      width: 100%;
      font-family: 'Times New Roman', Times, serif;
      font-size: 1em;
      color: var(--text);
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--border);
      outline: none;
      padding: 4px 2px;
      resize: none;
    }
    .form-row input:focus,
    .form-row textarea:focus {
      border-bottom-color: var(--text);
    }

    .form-row textarea {
      height: 90px;
      line-height: 1.5;
    }

    .char-count {
      font-size: 0.72em;
      color: var(--meta);
      text-align: right;
      margin-top: 3px;
    }

    /* File upload */
    .file-row {
      margin-bottom: 18px;
    }
    .file-row label {
      display: block;
      font-size: 0.78em;
      color: var(--meta);
      margin-bottom: 6px;
      letter-spacing: 0.03em;
    }
    .file-input-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 4px;
    }
    .file-btn {
      font-family: 'Times New Roman', Times, serif;
      font-size: 0.82em;
      color: var(--link);
      background: transparent;
      border: 1px solid var(--link);
      padding: 2px 10px;
      cursor: pointer;
      white-space: nowrap;
    }
    .file-btn:hover { color: var(--hover); border-color: var(--hover); }
    #file-name {
      font-size: 0.82em;
      color: var(--meta);
    }
    input[type="file"] { display: none; }

    /* Submit button */
    .sub-submit {
      margin-top: 22px;
      text-align: right;
    }
    .sub-submit button {
      font-family: 'Times New Roman', Times, serif;
      font-size: 1em;
      color: var(--text);
      background: transparent;
      border: 1px solid #111;
      padding: 6px 22px;
      cursor: pointer;
    }
    .sub-submit button:hover {
      background: #111;
      color: #fff;
    }

/* ── INDEX PAGE ── */
.index-wrap {
      margin-top: 36px;
    }

    .index-letter-group {
      margin-bottom: 28px;
    }

    .index-letter {
      font-size: 0.72em;
      color: var(--meta);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--border);
      padding-bottom: 3px;
      margin-bottom: 10px;
    }

    .index-list {
      list-style: none;
      column-count: 3;
      column-gap: 32px;
    }

    .index-list li {
      font-size: 0.92em;
      margin-bottom: 5px;
      break-inside: avoid;
      display: flex;
      align-items: baseline;
      gap: 5px;
    }

    .index-list a {
      color: var(--link);
      text-decoration: none;
    }
    .index-list a:hover {
      color: var(--hover);
    }

    .index-count {
      font-size: 0.75em;
      color: var(--meta);
    }

    /* alphabet jump nav */
    .index-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      margin-bottom: 28px;
      font-size: 0.78em;
    }
    .index-nav a {
      color: var(--link);
      text-decoration: none;
    }
    .index-nav a:hover { color: var(--hover); }
    .index-nav span { color: var(--border); }
/* ── MOBILE RESPONSIVE ── */
@media (max-width: 700px) {

  #wrap {
    padding: 20px 16px 40px;
  }

  #header-top {
    flex-direction: column;
    gap: 10px;
  }

  #title-line {
    max-width: 100%;
  }

  #site-title {
    font-size: 1.8em;
  }

  #tagline {
    font-size: 1em;
  }

  #nav {
    text-align: left;
    grid-template-columns: repeat(3, auto);
    gap: 6px 16px;
    font-size: 1.05em;
  }

  /* Hide corners, phrase words and margin line — keep main header title */
  #corner-br,
  #corner-bl,
  #corner-tr,
  .phrase,
  #margin-line {
    display: none;
  }

  /* Posts — single column */
  #content {
    column-count: 1;
  }

  .post-title {
    font-size: 1.1em;
  }

  .post-meta {
    font-size: 0.85em;
  }

  .post-body {
    font-size: 1em;
  }

  .post-keywords {
    font-size: 0.85em;
  }

  /* About & Submissions */
  .about-wrap,
  .sub-wrap {
    max-width: 100%;
    margin-top: 24px;
  }

  .about-box,
  .sub-box,
  .sub-form-box {
    padding: 20px 20px 24px;
  }

  .about-box p,
  .sub-box p {
    font-size: 1.2em;
    line-height: 1.65;
  }

  .about-bg-f,
  .sub-bg-f {
    font-size: 480px;
  }

  .about-bg-f sup,
  .sub-bg-f sup {
    font-size: 0.45em;
  }

  .about-credit {
    flex-direction: column;
    gap: 4px;
    font-size: 1em;
  }

  /* Submissions form */
  .form-row input[type="text"],
  .form-row input[type="email"],
  .form-row textarea {
    font-size: 1.1em;
  }

  .form-row label {
    font-size: 0.9em;
  }

  .sub-submit button {
    font-size: 1.1em;
    padding: 8px 28px;
  }

  /* Index */
  .index-list {
    column-count: 1;
  }

  .index-list li {
    font-size: 1em;
  }

  /* Search & pagination */
  #search input {
    width: 160px;
    font-size: 0.9em;
  }

  .pagination {
    flex-wrap: wrap;
    font-size: 0.95em;
    gap: 8px;
  }
}

/* ── PHOTO HOVER COLOUR EFFECT ── */
.photo-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}
.photo-wrap img { display: block; max-width: 100%; }
.photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  transition: none;
  pointer-events: none;
}
.post-photo.c-blue .photo-wrap::after   { background: #002FA7; opacity: 0.75; }
.post-photo.c-yellow .photo-wrap::after { background: #FFFF00; opacity: 0.65; }
.post-photo.c-purple .photo-wrap::after { background: #4a1c9b; opacity: 0.75; }
.post-photo.c-green .photo-wrap::after  { background: #00BB77; opacity: 0.70; }


/* Cycle through colours via JS class */