/*
  LOFINERDS LAYOUT + COMPONENTS
  Global visual values belong in theme.css.
*/

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 48px 12px;

  background-color: var(--color-page-bg);
  background-image: var(--page-background-image);
  background-attachment: fixed;
  background-size: cover, auto, 96px 96px;

  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: 1px;
}


/* =========================================
   SITE SHELL
   ========================================= */

.site-shell {
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
}


/* =========================================
   BASIC ELEMENTS
   ========================================= */

a:link,
a:visited,
a:active {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-accent-hover);
}

b {
  color: var(--color-accent);
  font-weight: bold;
}

i {
  color: var(--color-text-muted);
  font-style: normal;
}

code {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
}

hr {
  margin: 10px 0;
  border: 0;
  border-top: var(--border-thin) dotted var(--color-border);
}


/* =========================================
   SCROLLBAR
   ========================================= */

::-webkit-scrollbar {
  width: 5px;
  height: 0;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-accent);
  border-radius: var(--control-radius);
}


/* =========================================
   NAVIGATION
   ========================================= */

.navigation {
  background: var(--color-nav-bg);
  border-bottom: var(--border-thin) solid var(--color-accent);

  border-top-left-radius: var(--page-radius);
  border-top-right-radius: var(--page-radius);
}

#menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px;
  padding: 5px 7px;
}

#menu::before {
  content: "LOFINERDS //";

  margin-right: 3px;

  color: var(--color-surface-muted);

  font: normal 10px var(--font-ui);
  letter-spacing: 1px;
}

#menu a {
  display: inline-block;

  padding: 4px 7px;

  background: transparent;
  border: var(--border-thin) solid transparent;

  color: var(--color-nav-text);

  font: normal 10px var(--font-ui);
  line-height: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#menu a:hover,
#menu a:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);

  color: var(--color-on-accent);
}

#menu a[aria-current="page"] {
  border-color: var(--color-accent);
}


/* =========================================
   SITE NAME / TICKER BAR
   ========================================= */

.sitename {
  display: flex;
  align-items: center;
  gap: 6px;

  min-height: 22px;

  padding: 4px 8px;

  overflow: hidden;

  background: var(--color-surface-main);

  border-right: var(--border-thin) solid var(--color-accent);
  border-bottom: var(--border-thin) solid var(--color-accent);
  border-left: var(--border-thin) solid var(--color-accent);
}

.sitename .tiny-icon {
  flex: 0 0 auto;

  color: var(--color-accent);
}


/* =========================================
   MAIN LAYOUT
   ========================================= */

.site-layout {
  display: grid;
  grid-template-columns:
    var(--sidebar-width)
    minmax(0, 1fr);
}

.leftside,
.content {
  min-width: 0;

  background: var(--color-surface-main);
}

.leftside {
  padding: 10px 12px;

  border-left:
    var(--border-thin)
    solid
    var(--color-accent);

  border-right:
    var(--border-thin)
    solid
    var(--color-border);
}

.content {
  padding: 10px 12px 18px;

  border-right:
    var(--border-thin)
    solid
    var(--color-accent);
}

.content-full {
  padding: 10px 12px 18px;

  background: var(--color-surface-main);

  border-left:
    var(--border-thin)
    solid
    var(--color-accent);

  border-right:
    var(--border-thin)
    solid
    var(--color-accent);
}


/* =========================================
   WINDOWS
   ========================================= */

.window {
  margin: 0 0 12px;

  background: var(--color-surface);

  border:
    var(--border-window)
    solid
    var(--color-border);

  box-shadow: var(--window-shadow);
}


/* =========================================
   TITLES
   ========================================= */

.title,
.bigtitle {
  position: relative;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  text-transform: uppercase;

  font-family: var(--font-pixel);
  letter-spacing: 2px;
}

.title {
  margin-bottom: 5px;

  padding: 2px 18px 2px 4px;

  background: var(--color-surface-muted);

  border-bottom:
    var(--border-thin)
    dashed
    var(--color-border);

  color: var(--color-text);

  font-size: var(--font-size-title);
  line-height: 14px;
}

.bigtitle {
  margin: 5px 0;

  padding: 2px 18px 2px 4px;

  background: var(--color-surface-main);

  border-bottom:
    var(--border-thin)
    dashed
    var(--color-border);

  color: var(--color-text);

  font-size: 16px;
  line-height: 20px;
}

#journal.bigtitle {
  font-size: 16px;
}

.title::after,
.bigtitle::after {
  content: "_";

  position: absolute;

  right: 5px;
  top: 3px;

  color: var(--color-text);

  font: 11px/10px var(--font-ui);

  text-align: center;
}


/* Window title bars */

.window > .title,
.window > .bigtitle {
  margin: 0;

  padding: 4px 24px 4px 6px;

  background: var(--color-title-bg);

  border-bottom:
    var(--border-thin)
    solid
    var(--color-accent);

  color: var(--color-text);

  line-height: 15px;
}

.window > .title::after,
.window > .bigtitle::after {
  top: 4px;
  right: 7px;
}


/*
  Deep Fjord:
  window icons use teal instead of the primary blue.
*/

.window > .title .tiny-icon,
.window > .bigtitle .tiny-icon {
  color: var(--color-secondary);
}

.window-body {
  padding: 9px 10px;
}

.content > .window > *:not(.title):not(.bigtitle):not(.window-body) {
  margin-left: 10px;
  margin-right: 10px;
}

.content > .window > .window-body {
  margin-left: 0;
  margin-right: 0;
}

.content > .window > .update-log {
  padding-left: 0;
  padding-right: 0;
}


/* =========================================
   SMALL UI ELEMENTS
   ========================================= */

.tiny-icon {
  margin-right: 2px;

  color: var(--color-accent);

  font-size: 10px;
}

.welcome {
  color: var(--color-accent);

  font-family: var(--font-pixel);
  font-size: var(--font-size-welcome);

  letter-spacing: 2px;
}

.post-date,
.feed-note {
  color: var(--color-text-muted);

  font-size: var(--font-size-small);
}

.feed-note {
  padding-top: 2px;
  padding-bottom: 2px;
}

.post-date {
  font-family: var(--font-ui);
}


/* =========================================
   TICKER
   ========================================= */

.ticker-brand {
  color: var(--color-accent);

  font-weight: bold;

  letter-spacing: 1px;
}


/*
  Rust signal color creates a small warm accent
  without overpowering the site.
*/

.ticker-divider {
  margin: 0 5px;

  color: var(--color-signal);
}

.ticker-window {
  position: relative;

  flex: 1 1 auto;
  min-width: 0;
  height: 14px;

  overflow: hidden;

  color: var(--color-text-muted);

  line-height: 14px;
}

.ticker-item {
  position: absolute;

  left: 0;
  top: 0;

  opacity: 0;

  white-space: nowrap;

  line-height: 14px;

  animation: ticker-cycle 24s infinite;
}

.ticker-item:nth-child(2) {
  animation-delay: 4s;
}

.ticker-item:nth-child(3) {
  animation-delay: 8s;
}

.ticker-item:nth-child(4) {
  animation-delay: 12s;
}

.ticker-item:nth-child(5) {
  animation-delay: 16s;
}

.ticker-item:nth-child(6) {
  animation-delay: 20s;
}

@keyframes ticker-cycle {

  0%,
  3% {
    opacity: 0;
    transform: translateY(5px);
  }

  6%,
  14% {
    opacity: 1;
    transform: translateY(0);
  }

  17%,
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
}


/* =========================================
   BLOGGER / JOURNAL
   ========================================= */

#blogger-posts {
  padding: 8px 0 0;
}

.homepage-journal-card {
  display: flex;
  align-items: stretch;
  gap: 8px;

  margin: 0 0 10px;

  background: var(--color-surface-muted);
  border:
    var(--border-thin)
    solid
    var(--color-border);

  box-shadow: none;
}

.homepage-journal-card:last-child {
  margin-bottom: 0;
}

.journal-card-accent {
  width: 8px;

  background: var(--color-accent);
  border-right:
    var(--border-thin)
    solid
    var(--color-border);
}

.journal-card-content {
  flex: 1;

  min-width: 0;

  padding: 8px 0 8px 0;
}

.journal-card-title {
  display: inline-block;

  color: var(--color-accent);

  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.journal-card-date {
  margin-top: 0px;

  color: var(--color-text-muted);

  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 1px;
}

.journal-card-excerpt {
  margin-top: 0px;

  color: var(--color-text);

  font-size: 10px;
  line-height: 1.4;
}

.journal-card-read-more {
  display: inline;

  margin-left: 2px;

  color: var(--color-accent);

  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.journal-card-thumbnail {
  display: block;

  width: 96px;
  min-width: 96px;

  margin: 6px 6px 6px 0;

  border:
    var(--border-thin)
    solid
    var(--color-border);
}

.journal-card-thumbnail img {
  display: block;

  width: 100%;
  height: 100%;

  aspect-ratio: 1.2;
  object-fit: cover;
}

.has-thumbnail .journal-card-content {
  padding-right: 0;
}

.blogger-post,
.post,
.journal-list-item {
  margin-bottom: 9px;

  padding-bottom: 8px;

  border-bottom:
    var(--border-thin)
    dotted
    var(--color-border);
}

.blogger-post:last-child,
.journal-list-item:last-child {
  border-bottom: 0;
}

.blogger-post-title,
.journal-list-title {
  color: var(--color-accent);

  font-weight: bold;
}


/* =========================================
   INDIVIDUAL JOURNAL POSTS
   ========================================= */

.journal-post-content {
  font-size: 11px;

  line-height: 1.55;

  letter-spacing: .5px;
}

.journal-post-content img {
  max-width: 100%;
  height: auto;
}

.journal-post-content iframe {
  max-width: 100%;
}

.journal-post-content pre {
  overflow-x: auto;

  white-space: pre-wrap;
}

.journal-post-content blockquote {
  margin-left: 12px;

  padding-left: 10px;

  border-left:
    2px
    solid
    var(--color-border);

  color: var(--color-text-muted);
}


/* =========================================
   PHOTO GRIDS
   ========================================= */

.photo-grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 4px;

  margin: 5px 0;
}

.photo-grid-large {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.photo-grid a {
  display: block;
}

.photo-grid img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 1;

  object-fit: cover;

  padding: 2px;

  background: var(--color-surface);

  border:
    var(--border-thin)
    solid
    var(--color-border);
}

.hero-image {
  display: block;

  width: 100%;
  height: auto;

  margin: 1px 0 4px;
}


/* =========================================
   LINKS
   ========================================= */

.link-list {
  margin: 4px 0 8px 13px;

  padding: 0;
}

.link-list li {
  margin-bottom: 4px;
}

.webring {
  margin: 7px 0;

  padding: 5px 0;

  border-top:
    var(--border-thin)
    dotted
    var(--color-border);

  border-bottom:
    var(--border-thin)
    dotted
    var(--color-border);
}

.webring a {
  margin-right: 5px;
}


/* =========================================
   SITE STATUS
   ========================================= */

.status-updates-list {
  display: flex;
  flex-direction: column;
  gap: 6px;

  margin-bottom: 6px;
}

.status-update-item {
  display: block;

  padding-bottom: 6px;

  border-bottom:
    var(--border-thin)
    dotted
    var(--color-border);

  color: var(--color-text);

  font-size: var(--font-size-small);
  line-height: 1.4;
}

.status-update-date {
  text-decoration: underline;
}

.status-update-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.status-update-date {
  display: block;

  color: var(--color-text-muted);

  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 1px;
  text-decoration: underline;
}

.status-update-text {
  display: block;
}


/* =========================================
   CALENDAR
   ========================================= */

.calendar {
  width: 100%;

  border-collapse: collapse;

  color: var(--color-accent);

  font-size: var(--font-size-small);

  text-align: center;
}

.calendar th {
  color: var(--color-accent);

  font-weight: bold;
}

.calendar td,
.calendar th {
  padding: 2px;
}

.calendar .today {
  background: var(--color-accent);

  border:
    var(--border-thin)
    solid
    var(--color-text);

  color: var(--color-on-accent);
}


/* =========================================
   YOUTUBE
   ========================================= */

#youtube-feed {
  margin: 6px 0;
}

#youtube-feed iframe {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  border:
    var(--border-thin)
    solid
    var(--color-border);

  background: var(--color-surface-muted);
}


/* =========================================
   RADIO
   ========================================= */

.radio-box {
  margin: 6px 0 10px;

  padding: 0;

  background: transparent;

  border: 0;
}

.radio-box audio {
  display: block;

  width: 100%;
  height: 28px;

  margin: 2px 0 4px;
}

.radio-box audio[hidden] {
  display: none !important;
}

.radio-label {
  display: block;

  margin: 0 0 6px;
  padding-left: 6px;

  color: var(--color-text);

  font: 8px/1.1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.radio-control-box {
  padding: 6px;

  background: var(--color-surface-muted);

  border:
    var(--border-thin)
    solid
    var(--color-border);
}

.radio-buttons {
  display: flex;

  flex-wrap: wrap;
  justify-content: left;

  gap: 3px;

  margin-bottom: 0px;
}

.radio-buttons button {
  padding: 3px 4px;

  cursor: pointer;

  background: var(--color-title-bg);

  border:
    var(--border-thin)
    solid
    var(--color-border);

  color: var(--color-text);

  font: 9px var(--font-ui);
}

.radio-buttons button:hover,
.radio-buttons button:focus {
  background: var(--color-accent);

  border-color: var(--color-accent);

  color: var(--color-on-accent);
}


/* =========================================
   GUESTBOOK
   ========================================= */

.guestbook {
  margin-top: 7px;

  padding: 7px;

  background: var(--color-surface-muted);

  border:
    var(--border-thin)
    dashed
    var(--color-accent);
}

.guestbook a.gbook-button {
  display: inline-block;

  padding: 3px 6px;

  background: var(--color-accent);

  border:
    var(--border-thin)
    solid
    var(--color-text);

  color: var(--color-on-accent);

  font: 10px var(--font-ui);
}


/* =========================================
   UPDATE LOG
   ========================================= */

.update-log {
  margin: 4px 0 8px;

  padding: 0;

  list-style: none;
}

.update-log li {
  padding: 3px 0;

  border-bottom:
    var(--border-thin)
    dotted
    var(--color-border);
}

details {
  margin-top: 5px;
}

summary {
  color: var(--color-accent);

  cursor: pointer;
}


/* =========================================
   SITE BUTTONS
   ========================================= */

.button-wall {
  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  margin-top: 6px;
}

.button-wall a {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 88px;
  height: 31px;

  background: var(--color-surface);

  border:
    var(--border-thin)
    solid
    var(--color-border);

  color: var(--color-accent);

  font: 8px var(--font-ui);

  text-align: center;
}


/* =========================================
   PAGE INTRO
   ========================================= */

.page-intro {
  margin-bottom: 12px;

  padding: 8px 10px;

  background: var(--color-surface-muted);

  border-left:
    3px
    solid
    var(--color-accent);
}


/* =========================================
   BACK LINK ROW
   ========================================= */

.back-row {
  margin: 0 0 10px;

  font-family: var(--font-ui);
  font-size: var(--font-size-small);
}


/* =========================================
   SIGNOFF
   ========================================= */

.signoff {
  margin: 18px 0;

  text-align: center;
}


/* =========================================
   FOOTER
   ========================================= */

.footer {
  padding: 6px;

  background: var(--color-footer-bg);

  border-top:
    var(--border-thin)
    solid
    var(--color-accent);

  border-bottom-left-radius: var(--page-radius);
  border-bottom-right-radius: var(--page-radius);

  color: var(--color-footer-text);

  line-height: 18px;

  text-align: center;
}

.footer a {
  color: var(--color-surface-muted);
}

.stamp-row {
  margin: 7px 0;

  text-align: center;
}

.stamp-row a {
  display: inline-block;

  margin: 1px;

  padding: 3px 5px;

  background: var(--color-accent);

  color: var(--color-on-accent);

  font-family: var(--font-ui);
  font-size: 8px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

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

  body {
    padding: 16px 8px;
  }

  .site-layout {
    grid-template-columns: 1fr;
  }

  .leftside {
    border-right:
      var(--border-thin)
      solid
      var(--color-accent);
  }

  .content {
    border-left:
      var(--border-thin)
      solid
      var(--color-accent);
  }

  .photo-grid-large {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


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

  .photo-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .photo-grid-large {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .ticker-window {
    width: 100%;

    margin-top: 3px;
  }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .ticker-item {
    animation: none;

    opacity: 0;
  }

  .ticker-item:first-child {
    opacity: 1;
  }
}