/* -----------------------------------
Base
-------------------------------------- */

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-feature-settings:
    "kern" 1,
    "liga" 1;
}

/* -----------------------------------
StreamOfThought
-------------------------------------- */

html#SOT {
  font-size: calc(max(min(16px + 0.2vw, 50px), 16px + 0.2vw));
  font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
  line-height: 1.5;
  background-color: #f5f4f0;
  color: #4c4c4c;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-feature-settings:
    "onum" 1,
    "liga" 1;
  padding: 0;
}

#SOT main {
  display: block;
  width: 40em;
  max-width: 90%;
  margin: 0 auto;
}

#SOT .title {
  display: block;
  max-width: 90%;
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 5rem;
  text-align: center;
  text-decoration: none;
}

#SOT .title .title-logo {
  max-width: 100%;
  max-height: 8em;
}

#SOT .title .title-text {
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 0.6em;
  letter-spacing: 0.2em;
  color: #a9a59b;
  margin-bottom: 2em;
}

#SOT article {
  border-top: 1px solid #a9a59b;
  padding: 1em 0 2em 0;
  margin: 1em 0;
}

@media (min-width: 45rem) {
  #SOT article {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 2rem;
  }
}

#SOT article header h1 {
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1rem;
  letter-spacing: -0.02em;
  margin: 0;
}

#SOT article time {
  color: #a9a59b;
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 0.6em;
  letter-spacing: 0.03em;
  white-space: nowrap;
  display: block;
}

.paloma {
  display: block;
  margin: 0 auto;
  width: 64px;
  margin-top: 40rem;
  margin-bottom: 1rem;
}

.paloma img {
  width: 100%;
}

#SOT article code {
  font-size: 0.8em;
  color: #8f8f8f;
}

#SOT article blockquote {
  margin-left: 0;
  padding-left: 1em;
  border-left: solid #a9a59b 2px;
}

#SOT article a {
  color: #4c4c4c;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

#SOT article a:hover {
  background: #e7e4da;
  color: #4c4c4c;
}

#SOT footer {
  margin-block-start: 2em;
  width: 100%;
  /* Full width of the page */
  text-align: center;
  /* Centers the content horizontally */
  padding: 10px 0;
  /* Space around the image */
}

#SOT footer .sot-link {
  display: inline-blocK;
  /* Ensures proper layout for the image */
  width: 60px;
  /* Set the size of the circular image */
  height: 60px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  /* Smooth hover effects */
}

#SOT footer .sot-link img {
  width: 100%;
  /* Ensures the image fills the link area */
  height: 100%;
  /* Keeps proportions */
  object-fit: contain;
  /* Ensures the image scales properly */
}

#SOT footer .sot-link:hover {
  transform: scale(1.2);
}

/* -----------------------------------
Permalink
-------------------------------------- */

.permalink,
.permalink:visited {
  color: gray;
  text-decoration: none;
  background: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  /* Smooth transition */
}

.permalink:hover {
  color: black;
}

/* -----------------------------------
Stream: Custom styles per article type
-------------------------------------- */

#SOT .short-message {
  font-size: 1.5em;
}

#SOT .longform {
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: -0.03em;
}

/* -----------------------------------
Post Page
-------------------------------------- */

html#post-page {
  font-size: calc(max(min(16px + 0.2vw, 50px), 16px + 0.2vw));
  font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
  line-height: 1.5;
  background-color: #f5f4f0;
  color: #4c4c4c;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-feature-settings:
    "onum" 1,
    "liga" 1;
  padding: 0;
}

#post-page main {
  display: block;
  width: 40em;
  max-width: 90%;
  margin: 0 auto;
}

#post-page .title {
  display: block;
  max-width: 90%;
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 5rem;
  text-align: center;
  text-decoration: none;
}

#post-page .title .title-logo {
  max-width: 100%;
  max-height: 8em;
}

#post-page .title .title-text {
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 0.6em;
  letter-spacing: 0.2em;
  color: #a9a59b;
  margin-bottom: 2em;
}

#post-page article {
  border-top: 1px solid #a9a59b;
  padding: 1em 0 2em 0;
  margin: 1em 0;
}

@media (min-width: 45rem) {
  #post-page article {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 2rem;
  }
}

#post-page article header h1 {
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1rem;
  letter-spacing: -0.02em;
  margin: 0;
}

#post-page article time {
  color: #a9a59b;
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 0.6em;
  letter-spacing: 0.03em;
  white-space: nowrap;
  display: block;
}

#post-page article code {
  font-size: 0.8em;
  color: #8f8f8f;
}

#post-page article blockquote {
  margin-left: 0;
  padding-left: 1em;
  border-left: solid #a9a59b 2px;
}

#post-page article a {
  color: #4c4c4c;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

#post-page article a:hover {
  background: #e7e4da;
  color: #4c4c4c;
}

/* -----------------------------------
Short Message Page
-------------------------------------- */
html#short-message-page {
  font-size: calc(max(min(16px + 0.2vw, 50px), 16px + 0.2vw));
  font-family: "Hoefler Text", Georgia, "Times New Roman", Times, serif;
  line-height: 1.5;
  background-color: #f5f4f0;
  color: #4c4c4c;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-feature-settings:
    "onum" 1,
    "liga" 1;
  padding: 0;
  height: 100%;
}

#short-message-page body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#short-message-page main {
  font-size: 1.5em;
  max-width: 90%;
}

#short-message-page main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url("sot-logo-watermark.png") no-repeat center center;
  background-size: 50%;
}

@media (max-width: 768px) {
  #short-message-page main {
    background-size: 75%;
    /* Adjust the watermark size for tablets */
  }
}

@media (max-width: 480px) {
  #short-message-page main {
    background-size: 90%;
    /* Adjust the watermark size for phones */
  }
}

#short-message-page .content {
  border-radius: 8px;
  width: 20em;
  max-width: 90%;
}

#short-message-page footer {
  position: fixed;
  /* Ensures the footer stays at the bottom of the viewport */
  bottom: 0;
  left: 0;
  width: 100%;
  /* Full width of the page */
  text-align: center;
  /* Centers the content horizontally */
  padding: 10px 0;
  /* Space around the image */
}

#short-message-page footer .sot-link {
  display: inline-blocK;
  /* Ensures proper layout for the image */
  width: 60px;
  /* Set the size of the circular image */
  height: 60px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  /* Smooth hover effects */
}

#short-message-page footer .sot-link img {
  width: 100%;
  /* Ensures the image fills the link area */
  height: 100%;
  /* Keeps proportions */
  object-fit: contain;
  /* Ensures the image scales properly */
}

#short-message-page footer .sot-link:hover {
  transform: scale(1.2);
}

#short-message-page main blockquote {
  margin-left: 0;
  padding-left: 1em;
  border-left: solid #a9a59b 2px;
}

#short-message-page main a {
  color: #615e54;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

#short-message-page main a:hover {
  background: #e7e4da;
  color: #615e54;
}

/* -----------------------------------
Longform
-------------------------------------- */

html#longform-page {
  font-size: calc(max(min(16px + 0.2vw, 50px), 16px + 0.2vw));
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  line-height: 1.5;
  background-color: #f5f4f0;
  color: #4c4c4c;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-feature-settings:
    "onum" 1,
    "liga" 1;
  padding: 0;
}

#longform-page main {
  display: block;
  width: 38em;
  max-width: 90%;
  margin: 0 auto;
  margin-block-start: 5em;
}

#longform-page img {
  max-width: 100%;
}

/* -----------------------------------
Longform - Logo section
-------------------------------------- */

#longform-page .title {
  display: block;
  max-width: 90%;
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 5rem;
  text-align: center;
  text-decoration: none;
}

#longform-page .title .title-logo {
  max-width: 100%;
  max-height: 8em;
}

#longform-page .title .title-text {
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 0.6em;
  letter-spacing: 0.2em;
  color: #a9a59b;
  margin-bottom: 2em;
}

/* -----------------------------------
Longform Page: Header
-------------------------------------- */

#longform-page article header {
  text-align: center;
}

#longform-page article header time {
  font-size: 0.6em;
}

#longform-page article header h1 {
  font-size: 1.8em;
  margin: 0;
  color: #212121;
}

/* -----------------------------------
Longform Page: .longform
-------------------------------------- */

#longform-page .longform p {
  margin-block: 1em;
}

#longform-page .longform a {
  color: #212121;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

#longform-page .longform a:hover {
  background: #e7e4da;
  color: #4c4c4c;
}

#longform-page .longform h1,
h2,
h3 {
  font-weight: bold;
  margin-top: 2em;
  color: #212121;
  letter-spacing: -0.03em;
}

#longform-page .longform h2 {
  font-size: 1.2em;
}

#longform-page .longform h3 {
  font-size: 1em;
}

#longform-page .longform img {
  max-width: 100%;
}

#longform-page .longform ul {
  padding-left: 2em;
}

#longform-page .longform hr {
  max-width: 70%;
  border: 0.5px solid #a9a59b;
}

#longform-page footer {
  margin-block-start: 2em;
  width: 100%;
  /* Full width of the page */
  text-align: center;
  /* Centers the content horizontally */
  padding: 10px 0;
  /* Space around the image */
}

#longform-page footer .sot-link {
  display: inline-blocK;
  /* Ensures proper layout for the image */
  width: 60px;
  /* Set the size of the circular image */
  height: 60px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  /* Smooth hover effects */
}

#longform-page footer .sot-link img {
  width: 100%;
  /* Ensures the image fills the link area */
  height: 100%;
  /* Keeps proportions */
  object-fit: contain;
  /* Ensures the image scales properly */
}

#longform-page footer .sot-link:hover {
  transform: scale(1.2);
}