/* =====================================================================
   journal.css · Juni journal ("field log") · early-2000s blog skin
   ---------------------------------------------------------------------
   WHERE: load on the journey page ONLY, after the main stylesheet:
          <link rel="stylesheet" href="journal.css">
   SCOPE: everything lives under `.journey-page .journey-main`, so the
          landing page, waitlist, shared header and age gate are untouched.
   FONT:  Gen Interface JP (SIL OFL), loaded by the @import just below
          from jsDelivr, pinned to a fixed version. Weights 400 and 700
          are loaded; add `.../cdn/500.css` etc. if you start using more.
   THEME: all colors come from the site's existing variables
          (--blue, --ink, --paper, --muted, --panel, --panel-raised),
          so light and dark mode both work. Do not hard-code colors here
          except the two photo tokens below.
   EDITING GUIDE
     1. Tokens ....... change the look globally (font, borders, shadow)
     2. Font lock .... why one !important exists
     3. Masthead ..... page title banner
     4. Entry ........ sidebar / date bar / subject / body / meta / footer
     5. Archive ...... "previous entries" module
     6. Mobile ....... single breakpoint, 620px
   ===================================================================== */

@import url("https://cdn.jsdelivr.net/npm/gen-interface-jp@0.6.2/cdn/400.css");
@import url("https://cdn.jsdelivr.net/npm/gen-interface-jp@0.6.2/cdn/700.css");

.journey-page { scrollbar-color: var(--blue) var(--panel); }

.journey-page .journey-main {

  /* ---------- 1. Tokens ---------- */
  --jb-font:   "Gen Interface JP", Inter, Verdana, Tahoma, sans-serif;
  --jb-side:   172px;                                              /* entry sidebar width */
  --jb-line:   color-mix(in srgb, var(--paper) 62%, transparent);  /* borders */
  --jb-card:   var(--panel-raised);                                /* card surface */
  --jb-soft:   color-mix(in srgb, var(--blue) 9%, var(--panel-raised)); /* tinted panels */
  --jb-wash:   color-mix(in srgb, var(--blue) 6%, var(--panel-raised)); /* faint bars */
  --jb-shadow: color-mix(in srgb, var(--blue) 30%, transparent);   /* hard offset shadow */
  --jb-bar-ink:   var(--ink);  /* text on solid blue bars */
  --jb-photo-bg:  #fff;        /* photo frames stay white in both themes */
  --jb-photo-ink: #555;

  /* Xanga-style tiled dot backdrop */
  background-image: radial-gradient(color-mix(in srgb, var(--blue) 24%, transparent) 1px, transparent 1.3px);
  background-size: 9px 9px;

  /* ---------- 2. Font lock ----------
     The site's older stylesheet forces fonts with !important, so this is
     the one place we must answer in kind. If those legacy rules are ever
     deleted (see "Apply the requested display and entry faces"), remove
     the !important here too. */
  &, & * { font-family: var(--jb-font) !important; }

  /* ---------- 3. Masthead ---------- */
  .journey-lead {
    gap: 0;
    align-items: stretch;
    margin-top: 22px;
    padding: 0;
    border: 2px solid var(--jb-line);
    background: var(--jb-card);
    box-shadow: 4px 4px 0 var(--jb-shadow);

    > :first-child { padding: 22px 24px 26px; }

    .eyebrow {
      margin: 0 0 14px;
      padding-bottom: 8px;
      border-bottom: 1px dotted var(--jb-line);
    }
    h1 {
      max-width: none;
      font-size: clamp(28px, 4.4vw, 52px);
      font-weight: 700;
      letter-spacing: -.04em;
      line-height: 1.05;
    }
    .journey-aside {
      padding: 18px 20px;
      border-left: 2px solid var(--jb-line);
      background: var(--jb-soft);
    }
    .journey-deck { margin: 0; font-size: 11px; line-height: 1.7; }
  }

  /* Sketch stack keeps its legacy positioning; only the frame changes. */
  .sketch-card {
    padding: 4px;
    border: 1px solid var(--jb-line);
    background: var(--jb-photo-bg);
    box-shadow: 2px 3px 0 var(--jb-shadow);
  }
  .journal-sketch-stack figcaption { letter-spacing: .04em; }

  /* Shared solid-blue title bar: entry date + archive heading */
  .journal-entry .journal-date,
  .journal-next .archive-intro h2 {
    background: var(--blue);
    color: var(--jb-bar-ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  /* ---------- 4. Entry (LiveJournal two-column card) ---------- */
  .journal-entry {
    display: grid;
    grid-template-columns: var(--jb-side) minmax(0, 1fr);
    gap: 0;
    margin-bottom: 30px;
    padding: 0;
    border: 2px solid var(--jb-line);
    background: var(--jb-card);
    box-shadow: 4px 4px 0 var(--jb-shadow);

    &::before { content: none; } /* remove legacy "tape" decoration */

    /* Sidebar: LJ "user info" panel */
    .journal-index {
      align-self: stretch;
      gap: 6px;
      margin: 0;
      padding: 14px 12px;
      border: 0;
      border-right: 2px solid var(--jb-line);
      background: var(--jb-soft);
      color: var(--paper);
      font-size: 10px;
      line-height: 1.6;
      transform: none;

      > span:first-child {
        display: block;
        padding-bottom: 6px;
        border-bottom: 1px dotted var(--jb-line);
        color: var(--blue);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
      }
      .journal-author { color: var(--paper); font-size: 10px; font-weight: 700; letter-spacing: 0; }
      > span:last-child:not(.journal-author) { color: var(--muted); font-size: 10px; }
    }

    /* Body column */
    .journal-body { max-width: none; padding: 0 0 40px; }
    .journal-body > :not(.journal-date):not(h2) { margin-inline: 16px; }

    .journal-date { display: block; margin: 0; padding: 6px 16px; }

    /* LJ subject line */
    .journal-body h2 {
      margin: 0 0 14px;
      padding: 10px 16px;
      border-bottom: 1px dashed var(--jb-line);
      background: var(--jb-wash);
      font-size: clamp(17px, 2vw, 22px);
      font-weight: 700;
      letter-spacing: -.01em;
      line-height: 1.3;

      em { font-style: italic; font-weight: 700; }
    }

    .journal-copy {
      max-width: none;
      color: var(--paper);
      font-size: 12px;
      line-height: 1.75;

      p + p { margin-top: 14px; }
      a { color: var(--blue); text-decoration: underline; }
    }

    /* Inline photo (Xanga / Open Diary frame) */
    .journal-figure {
      width: min(100%, 260px);
      margin-block: 16px;
      padding: 4px;
      border: 1px solid var(--jb-line);
      background: var(--jb-photo-bg);
      box-shadow: 2px 2px 0 var(--jb-shadow);

      figcaption { margin-top: 5px; color: var(--jb-photo-ink); font-size: 9px; letter-spacing: 0; text-align: center; }
    }

    /* LJ "current mood / music" metadata block */
    .journal-end {
      display: grid;
      gap: 0;
      margin-top: 20px;
      padding: 0;
      border: 1px solid var(--jb-line);
      background: var(--jb-soft);

      p {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        margin: 0;
        padding: 5px 10px;
        font-size: 10px;
        line-height: 1.6;
      }
      p + p { border-top: 1px dotted var(--jb-line); }
      b { color: var(--blue); font-weight: 700; letter-spacing: .02em; }
      span { color: var(--paper); }
    }

    /* Footer strip: "comment / permalink" */
    .journal-mark {
      inset: auto 0 0 var(--jb-side);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: auto;
      height: auto;
      padding: 7px 14px;
      border: 0;
      border-top: 1px solid var(--jb-line);
      border-radius: 0;
      background: var(--jb-wash);
      color: var(--blue);
      font-size: 10px;
      text-decoration: underline;
      transform: none;

      span { margin-left: 6px; font-size: 12px; font-style: normal; }
    }
  }

  /* ---------- 5. Archive ("previous entries" module) ---------- */
  .journal-next {
    padding-top: 0;
    border: 0;

    .archive-intro {
      display: block;
      margin: 0;
      padding: 0;
      border: 2px solid var(--jb-line);
      border-bottom: 0;
      background: var(--jb-card);

      h2 { margin: 0; padding: 6px 14px; }
      p  { max-width: none; padding: 10px 14px; font-size: 11px; font-style: normal; }
    }
  }
  .archive-lines {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 2px solid var(--jb-line);
    border-top: 1px dotted var(--jb-line);
    background: var(--jb-card);
    box-shadow: 4px 4px 0 var(--jb-shadow);

    span {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 14px;
      border: 0;
      font-size: 10px;
      letter-spacing: 0;

      &::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--blue); } /* square bullet */
    }
    span + span { padding-left: 14px; border-top: 1px dotted var(--jb-line); }
  }

  /* ---------- 6. Mobile ---------- */
  @media (max-width: 620px) {
    .journey-lead .journey-aside { border-top: 2px solid var(--jb-line); border-left: 0; }

    .journal-entry {
      grid-template-columns: 1fr;

      .journal-index {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 14px;
        padding: 9px 12px;
        border-right: 0;
        border-bottom: 2px solid var(--jb-line);

        > span:first-child { padding-bottom: 0; border-bottom: 0; }
      }
      .journal-mark { left: 0; }
    }
  }
}