/* The homepage's look on the journal's own pages: its photograph behind
   everything, its two typefaces, and its fixed nav that reads white over the
   picture and turns to linen and walnut once the page has scrolled. Everything
   inside the cards is each page's own. */

:root {
  --lj-nav-height: 72px;
}

html {
  overflow-x: hidden;
}

body {
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* The homepage's hero photograph, with the same gradient and vignette the
   design lays over it, pinned behind the page. A fixed layer rather than a
   fixed background so it holds on iOS, which ignores background-attachment. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.6)),
    url('/hero.jpg') center / cover no-repeat,
    var(--ink);
  pointer-events: none;
}

/* Inside the shell (app.html) the shell paints the photograph once, behind
   every page, so moving between pages never repaints it. */
html.lj-framed body {
  background: transparent;
}

html.lj-framed body::before {
  display: none;
}

/* Inside the shell the nav is the shell's own, rendered once and kept across
   pages; a page's own bar only takes part when the page stands alone. The
   scrollbar's gutter is always reserved so a page that scrolls and one that
   does not lay out to the same width. */
html.lj-framed {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html.lj-framed body.lj-has-nav .header {
  display: none;
}

h1, h2, h3, h4, h5, h6, .logo, .page-title {
  font-family: var(--font-display);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tan-mid); border-radius: 3px; }

/* Text that sits on the photograph rather than in a card. */
.logo, .tagline, .subtitle, .page-title, .soaking-description, .user-info, .lj-under-nav {
  color: rgba(255, 255, 255, 0.85);
}


/* ------------------------------------------------------------ the nav bar */

body.lj-has-nav {
  padding-top: calc(var(--lj-nav-height) + 1.5rem);
}

body.lj-has-nav .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--lj-nav-height);
  margin: 0;
  padding: 0 max(1.5rem, calc(50% - 36rem + 1.5rem));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  text-align: left;
  color: #fff;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.7s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 64rem) {
  body.lj-has-nav .header {
    padding: 0 max(2.5rem, calc(50% - 36rem + 2.5rem));
  }
}

body.lj-has-nav .header.lj-scrolled,
body.lj-has-nav .header.lj-menu-open {
  color: var(--walnut);
  background-color: rgba(225, 206, 187, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border-bottom-color: rgba(196, 168, 130, 0.4);
}

body.lj-has-nav .header > .logo,
body.lj-has-nav .header > .page-title {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.025em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

body.lj-has-nav .header > .nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  position: relative;
}

body.lj-has-nav .header > .nav a {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.9;
  text-decoration: none;
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

body.lj-has-nav .header > .nav a:hover {
  color: inherit;
  opacity: 0.6;
}

body.lj-has-nav .header > .nav a.active {
  color: inherit;
  opacity: 1;
  font-weight: 500;
}

body.lj-has-nav .header > .nav .nav-underline {
  position: absolute;
  bottom: -6px;
  height: 2px;
  background: currentColor;
  transition: left 0.25s ease, width 0.25s ease;
  pointer-events: none;
}

body.lj-has-nav .header > .user-info {
  margin: 0 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-style: italic;
  color: inherit;
  opacity: 0.9;
  white-space: nowrap;
  text-align: right;
}

body.lj-has-nav .header > .lj-menu-button {
  display: none;
}

/* Anything the page kept in its header besides the bar -- a subtitle, a
   description -- now sits just under it. */
body.lj-has-nav .lj-under-nav {
  line-height: 1.4;
  text-align: center;
  margin-bottom: 1.5rem;
}

@media (max-width: 59.99rem) {
  body.lj-has-nav .header {
    display: grid;
    grid-template-columns: 1fr auto;
    height: auto;
    min-height: var(--lj-nav-height);
    gap: 0 1rem;
  }

  body.lj-has-nav .header > .logo,
  body.lj-has-nav .header > .page-title {
    grid-row: 1;
    grid-column: 1;
    min-height: var(--lj-nav-height);
  }

  body.lj-has-nav .header > .lj-menu-button {
    display: block;
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    justify-self: end;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
  }

  body.lj-has-nav .header > .lj-menu-button span {
    display: block;
    width: 1.25rem;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }

  body.lj-has-nav .header > .lj-menu-button span + span {
    margin-top: 5px;
  }

  body.lj-has-nav .header.lj-menu-open > .lj-menu-button span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  body.lj-has-nav .header.lj-menu-open > .lj-menu-button span:nth-child(2) {
    opacity: 0;
  }

  body.lj-has-nav .header.lj-menu-open > .lj-menu-button span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  body.lj-has-nav .header > .nav,
  body.lj-has-nav .header > .user-info {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.lj-has-nav .header > .user-info {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  body.lj-has-nav .header > .nav {
    position: absolute;
    top: 100%;
    right: max(1.5rem, calc(50% - 36rem + 1.5rem));
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    padding: 0 1.5rem;
    text-align: right;
    background-color: rgba(225, 206, 187, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(196, 168, 130, 0.4);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 24px -8px rgba(61, 43, 26, 0.25);
  }

  body.lj-has-nav .header > .nav .nav-underline {
    display: none;
  }

  body.lj-has-nav .header > .user-info {
    text-align: left;
    white-space: normal;
  }

  body.lj-has-nav .header.lj-menu-open > .nav,
  body.lj-has-nav .header.lj-menu-open > .user-info {
    max-height: 18rem;
    opacity: 1;
    pointer-events: auto;
  }

  body.lj-has-nav .header.lj-menu-open > .nav {
    padding: 1.25rem 1.5rem;
  }

  body.lj-has-nav .header.lj-menu-open > .user-info {
    padding-bottom: 1.25rem;
  }
}