@view-transition {
  navigation: auto;
}

/*@view-transition {
  navigation: auto;
}

#header, #footer {
  view-transition-name: none;
}
*/
:root {
/* 
-s   = size
-fam = family
-br  = primary 
-se  = secondary
-te  = tertiary
-qu  = quaternary
-bo  = border
-bq  = blockquote
-bg  = background
-t   = text 
-a   = accent
-sp  = special
--bs = box-shadow
--mw = max-width
-w   = width
-h   = height
*/

  /* Font */
  --f-fam: 'EB Garamond', serif;
  --f-fam-mono: monospace;

  --fs-body: 1.375rem;
  --fs-pr: 1.25rem;
  --fs-se: 1.125rem;
  --fs-te: 1rem;
  --fs-qu: 0.875rem;
  --fs-h1-idx: 3.75rem;
  --fs-h1: 2.25rem;
  --fs-h2: 1.625rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.375rem;

  /* Colors */
  --c-white: #ffffff;
  --c-offwhite: #f5f5f5;
  --c-black: #000000;
  --c-offblack: #060606;
  --c-bg-body: #1c1c1c;
  --c-bg-dark: #121212;
  --c-bg-pr: #1c1c1c;
  --c-bg-se: #2b2b2b;
  --c-bg-te: #333333;
  --c-bo-bq: #aaaaaa; 
  --c-bo-pr: #616161;
  --c-bo-se: #757575;
  --c-bo-te: #9e9e9e;
  --c-t-pr: #ffffff;
  --c-t-se: #eeeeee;
  --c-t-te: #e0e0e0;
  --c-t-dark: #9e9e9e;
  --c-t-darker: #757575;
  --c-t-a: #006eff;
  --c-a-sp-light-purple: #9460a5;
  --c-a-sp-purple: #802a77;
  --c-a-sp-blue: #4ba0c5;
  --c-a-sp-red: #d52a19;
  --c-a-sp-blue-n: #037dc9;
  --c-a-light-blue: #3793dd;
  --c-a-blue: #2271b1;
  --c-a-dark-blue: #135e96;
  --c-a-light-red: #ff5d5e;
  --c-a-red: #b32d2e;
  --c-a-dark-red: #710d0d;
  --c-a-green: #5cb85c;
  --c-patreon-orange: #f96854;
  --c-amazon-orange: #ff9900;
  --c-a-card: var(--c-a-sp-blue-n);

  /* Effects */
  --ts-card: 0 0 2px black, 0 0 2px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 2px black, 0 0 2px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 2px black;
  --bs-faint: 1px 0 14px 0 rgb(0, 0, 0, 0.04);
  --bs-light: 0 0 8px rgb(0 0 0 / 15%);
  --bs-crisp: 0 0 3px rgb(0 0 0 / 10%), 0 0 8px rgb(0 0 0 / 25%);

  --ef-bottle: drop-shadow(0 0 22px var(--c-a-dark-blue));

  /* Components */
  --w-scrollbar: -0.5rem;
  --h-head: 3rem;
  --mw-folio: calc(70ch + 9rem);
  --mw-leaf: calc(70ch + 3rem);
  --mw-flysheet: calc(48ch + 9rem);
  --mw-spread: 1366px;
  --mw-idx: calc(1750px + 6rem);

  /* Root Settings */
  -moz-tab-size: 4;
  tab-size: 4;
  color-scheme: dark; /* Keep consistent with iframe */
}

@media screen and (max-width: 600px) {
  :root {
    /*--fs-body: 1.125rem;*/
    --fs-body: 1.1875rem;
    --fs-pr: 1.125rem;
    --fs-se: 1rem;
    --fs-te: 0.9375rem;
    --fs-qu: 0.875rem;
    --fs-h1-idx: 2.5rem;
    --fs-h1: 1.625rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.375rem;
    --fs-h4: 1.25rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* Light Mode */
body.light-mode {
  --c-bg-body: #f1f1f1;
}

.sheet, .leaf {
  background: var(--c-bg-pr);
  transition: background 0.3s ease, color 0.3s ease;
}

.light-mode {
  .intersecting:not(.show-menu),
  .sheet,
  .leaf,
  .modal,
  .message-modal-content,
  .card-story-home,
  .card-story-simple,
  .form-control {
    --c-bg-pr: #f1f1f1;
    --c-bg-se: #d7d7d7;
    --c-bg-te: #fcfcfc;

    --c-bo-pr: #a5a5a5;

    --c-t-pr: #121212;
    --c-t-se: #242424;
    --c-t-te: #4f4f4f;
  }

  #header.show-menu {
    --c-bg-pr: #f1f1f1;
  }

  @media (hover: none) and (pointer: coarse) {
    #header:not(.show-menu),
    .home-title,
    .idx-title,
    #footer {
      --c-bg-pr: #f1f1f1;
      --c-bg-se: #d7d7d7;
      --c-bg-te: #fcfcfc;

      --c-bo-pr: #a5a5a5;

      --c-t-pr: #121212;
      --c-t-se: #242424;
      --c-t-te: #4f4f4f;
    }
  }

  /*&.stories:not(.idx) {
    #header:not(.intersecting) {
      --c-t-pr: #ffffff;
      #color-button,
      #menu-button {
        --btn-color: #ffffff;
      }
    }
  }*/

  &:not(.idx) {
    #header:not(.intersecting) {
      --c-t-pr: #ffffff;
      #color-button,
      #menu-button {
        --btn-color: #ffffff;
      }
    }
  }
  
  #header.intersecting {
    #color-button:hover {
      --btn-color: #ffffff;
      color: var(--btn-color);
      fill: var(--btn-color);
    }
  }

  .chapter-nav,
  .card-story-home-ctrl,
  .message-modal-body,
  .btn:not(.btn-icon:not(.message-modal .btn-icon:not(:hover))):not(.btn-primary-folio:not(:hover)):not(.btn-list-item:not(:hover)),
  .btn-icon:hover:not(#menu-button):not(#color-button),
  .modal ::-webkit-scrollbar-thumb,
  .story-toc-wrap::-webkit-scrollbar-thumb {
    --c-t-pr: #fafafa;
    --c-t-se: #eeeeee;
    --c-t-te: #e0e0e0;

    --c-bg-dark: #121212;
    --c-bg-pr: #212121;
    --c-bg-se: #2d2d2d;
    --c-bg-te: #5d5d5d;
    --c-bo-bq: #aaaaaa;
    --c-bo-pr: #616161;
    --c-bo-se: #757575;
    --c-bo-te: #9e9e9e;
  }

  .card-story-home-ctrl .btn-white:not(:hover) {
    --btn-color: var(--c-t-pr);
    --btn-color-a: var(--c-bg-se);
  }

  .btn-patreon-sign-in {
    --btn-color: var(--c-t-pr);
    --btn-bg: var(--c-bg-dark);
  }

  .lock-notice {
    background: var(--c-bg-pr);
  }

  .message-title,
  .message-return-link:not(:hover) {
    color: var(--c-bg-pr);
  }

  .type a {
    color: var(--c-a-blue);
  }

  #color-button {
    --btn-color-a: var(--c-a-sp-purple);

    &:hover:not(.light-mode #color-button) {
      color: #ffffff;
    }
  }
}

/* Resets and Top-Level Structure */
/* Setting box-sizing on all elements makes it easier to use content-box on container elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  color: var(--c-t-pr);
  font-family: var(--f-fam);
  font-size: var(--fs-body);
  font-kerning: auto;
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--c-bg-body);
/*  transition: background 0.3s ease;*/
  transition: color 0.3s ease, background 0.3s ease;

}

main {
  flex-grow: 1;
  padding-top: calc(50dvh - 4.5rem - (1.3 * 0.5 * var(--fs-h1)));
}

.home, .idx {
  & main {
    padding-top: calc(50dvh - (1.3 * 0.5 * (var(--fs-h1-idx))));
  }
}

.account.idx main {
  padding-top: calc((var(--h-head) + 4.5rem));
}

.stories:not(.idx) main {
  padding-top: 0;
}

@media (hover: none) and (pointer: coarse) {
  main {
    padding-top: calc(2.5 * var(--h-head));
  }

  .blog main {
    padding-top: calc(3.5 * var(--h-head));
  }

  .home, .idx, .blog {
    & main {
      padding-top: calc(3.75 * var(--h-head));
    }
  }
}

iframe {
  border: 0;
  color-scheme: dark; /* Keep consistent with :root */
}

/* Text */
/* Headings */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: var(--c-t-se);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.5rem 0 0.5rem;
  transition: color 0.3s ease;
}

h1, .h1 {
  font-size: var(--fs-h1);
  margin: 0 0 1rem;
}

h2, .h2 {
  font-size: var(--fs-h2);
  margin: 2.5rem 0 0.5rem;
}

h3, .h3 {
  font-size: var(--fs-h3);
}

h4, .h4 {
  font-size: var(--fs-h4);
}

h5, .h5,
h6, .h6 {
  font-size: 1em;
}

/* p */
p {
  margin: 0 0 1.5rem;

  &:last-child {
    margin: 0;
  }
}

/* a */
a {
  color: var(--c-t-pr);
  text-decoration: none;
  transition: color 0.15s ease-in-out;

  &:hover {
    color: var(--c-a-light-blue);
  }
}

/* Inline Markup */
b,
strong {
  font-weight: bolder;
}

small {
  font-size: 0.875em;
}

mark {
  padding: 0.1875em;
}

sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  cursor: help;
}

/* Block Markup */
hr {
  color: inherit;
  opacity: 0.25;
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid;
}

ul,
ol {
  padding-left: 1.5rem;
}

ul,
ol,
dl {
  margin: 0 0 1rem;

  &:last-child {
    margin: 0;
  }
}

ul ul
ol ol
ul ol
ol ul {
  margin: 0.75rem 0 0;
}

ol ol {
  list-style-type: lower-roman;
}

ol ol ol {
  list-style-type: lower-alpha;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1.5rem;
  padding: 0.5rem 1rem;
  border-left: 2px solid var(--c-bo-bq);

  p:not(:last-child) {
    margin: 0 0 0.5rem;
  }
}

details {
  display: block;
}

summary {
  display: list-item;
  cursor: pointer;
}

address {
  font-style: normal;
  line-height: inherit;
  margin: 0 0 1.5rem;
}

/* pre, code, kbd */
pre,
code,
kbd,
samp {
  font-family: var(--f-fam-mono);
  font-size: 1em;
}

pre {
  font-size: 0.875em;
  overflow: auto;
  display: block;
  margin: 0 0 1.5rem;

  code {
    color: inherit;
    font-size: inherit;
    word-break: normal;
  }
} 

code {
  color: var(--c-t-lighter);
  font-size: 0.875em;
  word-wrap: break-word;
}

a > code {
  color: inherit;
}

kbd {
  color: var(--c-bg-pr);
  font-size: 0.875em;
  padding: 0.1875rem 0.375rem;
  background-color: var(--c-t-pr);
  border-radius: 0.25rem;

  kbd {
    font-size: 1em;
    padding: 0;
  }
}

/* Elements */
/* Images */
img {
  max-width: 100%;
}

img,
svg {
  line-height: 1;
  vertical-align: middle;
}

svg {
  fill: currentColor;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-75 {
  max-width: 75%;
  height: auto;
}

.img-50 {
  max-width: 75%;
  height: auto;
}

figure {
  line-height: 1;
  margin: 0 0 1.5rem;
}

figcaption {
  color: var(--c-t-lighter);
  font-size: var(--fs-se);
  line-height: 1.5;
}

/* Tables */
table {
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  caption-side: bottom;
}

caption {
  color: var(--c-t-lighter);
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

.table {
  word-break: break-word;
  vertical-align: top;
  width: 100%;
  border-bottom: 1px solid var(--c-bo-pr);

  th,
  td {
    line-height: 1.5;
    text-align: left;
    padding: 0.5rem;
    border-top: 1px solid var(--c-bo-pr);
  }
}

.table:not(:last-child) {
  margin: 0 0 1.5rem;
}

.table-bordered {
  border: 1px solid var(--c-bo-pr);
  border-radius: 9px;

  th,
  td {
    border-left: 1px solid var(--c-bo-pr);
  }

  th:first-of-type, 
  td:first-of-type {
    border-left: 0;
  }

  thead:first-child tr:first-child th, 
  tbody:first-child tr:first-child th, 
  tbody:first-child tr:first-child td {
    border-top: 0;
  }
}

.caption-top {
  caption-side: top;
}

.table-hover {
  tbody tr td {
    transition: background 0.15s linear;
  }

  tbody tr:hover td {
    background: var(--c-bg-se);
  }

  @media (prefers-reduced-motion: reduce) {
    tbody tr td {
      transition: none;
    }
  }
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Buttons and Inputs */
button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

.btn {
  --btn-color: var(--c-t-se);
  --btn-color-a: transparent;
  --btn-bg: none;
  --btn-bo: none;
  --btn-bo-radius: 6px;
  color: var(--btn-color);
  fill: var(--btn-color);
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  touch-action: manipulation;
  user-select: none;
  padding: 0.375rem 0.5rem;
  background: var(--btn-bg);
  border: var(--btn-bo);
  border-radius: var(--btn-bo-radius);
  transition: color 0.15s ease-in-out, fill 0.15s ease-in-out, background 0.15s ease-in-out, border-color 0.15s ease-in-out!important;

  &:hover {
    text-decoration: none;
  }
}

a.btn {
  text-decoration: none;

  &:focus {
    color: var(--btn-color);
    fill: var(--btn-color);
  }
}

.btn svg,
.btn-nav * {
  pointer-events: none;
  user-select: none;
}

.btn-primary {
  --btn-color-a: var(--c-a-blue);
}

.btn-primary-folio {
  --btn-color-a: var(--c-bg-pr);

  &:hover {
    --btn-color-a: var(--c-a-blue);
  }
}

.btn-secondary {
  --btn-color-a: var(--c-bg-se);
}

.btn-danger {
  --btn-color-a: var(--c-a-red);
}

.btn-white {
  --btn-color: var(--c-offblack);
  --btn-color-a: var(--c-offwhite);
}

.btn-amazon {
  --btn-color: var(--c-white);
  --btn-color-a: var(--c-amazon-orange);
  --btn-bg: var(--c-amazon-orange);
}

.btn-round {
  --btn-bo-radius: 100%;
}

.btn-pill {
  --btn-bo-radius: 9999px;
  font-weight: 500;
  padding: 0.2rem 1rem;
}

.btn-outline {
  --btn-bo: 2px solid var(--btn-color-a);
  --btn-color: var(--btn-color-a);

  &.btn-primary {
    --btn-color: var(--c-a-light-blue);
  }

  &.btn-secondary {
    --btn-color: var(--c-t-se);
  }

  &.btn-danger {
    --btn-color: var(--c-a-light-red);
  }
}

.btn-solid {
  --btn-bg: var(--btn-color-a);
  --btn-bo: 2px solid var(--btn-color-a);
}

.btn-transparent {
  border: 2px solid transparent;
}

.btn-icon,
.btn-icon-invert,
.btn-icon-solid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-solid {
  --btn-bg: var(--c-bg-te);
}

.btn-nav {
  --btn-color: var(--c-t-pr);
  --btn-color-a: var(--c-a-blue);
  --btn-bg: var(--c-bg-se);
  line-height: 1.15;
  padding: 0.55rem 0.75rem;
  text-wrap: balance;
}

.btn-patreon {
  --btn-color: var(--c-white);
  --btn-color-a: var(--c-a-sp-purple);
  --btn-bg: var(--c-patreon-orange);
  color: var(--btn-color)!important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.btn-patreon-sign-in {
  --btn-color: var(--c-bg-dark);
  --btn-color-a: var(--c-a-sp-purple);
  --btn-bg: var(--c-t-pr);
  color: var(--btn-color)!important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.btn-amazon,
.btn-patreon,
.btn-patreon-sign-in {
  text-decoration: none!important;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    --btn-color: var(--c-t-pr);
    color: var(--btn-color);
    fill: var(--btn-color);
  }

  .btn-list-item:hover {
    --btn-bg: var(--btn-color-a);
  }

  .btn-primary:hover {
    --btn-color-a: var(--c-a-dark-blue);
  }

  .btn-secondary:hover {
    --btn-color-a: var(--c-bg-te);
  }

  .btn-danger:hover {
    --btn-color-a: var(--c-a-dark-red);
  }

  .btn-white:hover {
    --btn-color-a: var(--c-a-blue);
  }

  .btn-outline:hover {
    --btn-bg: var(--btn-color-a);
    --btn-color: var(--c-t-pr);
  }

  .btn-transparent:hover:not([disabled]) {
    --btn-bg: var(--btn-color-a);
    --btn-bo: 2px solid var(--btn-color-a);
  }

    .btn-icon.btn-primary:hover {
    --btn-color-a: var(--c-a-blue);
  }

  .btn-icon:hover {
    --btn-bg: var(--c-bg-te);
    --btn-color: var(--c-t-pr);
  }

  .btn-icon-invert:hover,
  .btn-icon-solid:hover,
  .btn-nav:hover,
  .btn-patreon:hover,
  .btn-patreon-sign-in:hover {
    --btn-bg: var(--btn-color-a);
    color: var(--c-t-pr);
    fill: var(--c-t-pr);
  }
}

.btn-icon.btn-toggle.active {
  --btn-bg: var(--c-bg-te);
}

.btn[disabled] {
  cursor: default;
}

label {
  display: inline-block;
}

input,
button,
select,
optgroup,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;

  &:disabled {
    opacity: 1;
  }
}

option {
  color: inherit;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;

  &:not(:disabled) {
    cursor: pointer;
  }
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.validation {
  color: var(--c-a-light-red);
  font-size: var(--fs-se);

  &:not(:empty) {
    margin: -1rem 0 0.25rem;
  }
}

.form-text {
  font-size: var(--fs-te);
  font-weight: 400;
  color: var(--c-t-se);
  margin-top: 0.25rem;
}

.form-label {
  font-size: var(--fs-se);
  font-weight: 500;
  margin-bottom: 0.5rem;

  &.form-check-label {
    margin-bottom: 0;
  }
}

.form-control {
  color: var(--c-t-pr);
  font-size: var(--fs-te);
  font-weight: 400;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1.5;
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  background-color: var(--c-bg-te);
  background-clip: padding-box;
  border: 1px solid var(--c-bo-pr);
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.25s ease, color 0.25s ease;

  &[disabled] {
    color: var(--c-t-te);
    background-color: var(--c-bg-se);
  }
}

.form-control,
.form-select {
  &:focus {
    border-color: var(--c-a-dark-blue);
    box-shadow: 0 0 0 0.125rem var(--c-a-dark-blue);
    outline: 0;
  }
}

.form-control-sm {
  font-size: var(--fs-qu);
  min-height: calc(1.5em + 0.5rem + calc(1px * 2));
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.form-check {
  font-size: var(--fs-se);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.form-check,
.form-check-label,
.form-check-input {
  cursor: pointer;
}

.form-select {
  font-size: var(--fs-se);
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-t-pr);
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  background-color: var(--c-bg-te);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  border: 1px solid var(--c-bo-pr);
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  option:hover {
    background-color: var(--c-a-dark-blue);
  }
}

.form-select-sm {
  font-size: var(--fs-qu);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  background-position: right 0.5rem center;
  border-radius: 0.25rem;
}

textarea {
  resize: vertical;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Type */
.type {
  line-height: 1.5;
  word-break: break-word;
  text-wrap: pretty;
  overflow-wrap: break-word;

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    text-wrap: balance;
  }

  a {
    color: var(--c-a-light-blue);
    transition: color 0.15s linear, text-decoration 0.15s linear;

    &:hover {
      color: var(--c-a-sp-blue);
      text-decoration: underline;
    }
  }

  li:not(:last-child) {
    margin: 0 0 0.25rem;
  }

  ul ul li:first-child {
    margin: 0.25rem 0;
  }
}

@media screen and (max-width: 600px) {
  .type {
    text-wrap: unset;
  }
}

/* Site header */
#header {
  line-height: 1;
  white-space: nowrap;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 50%), transparent);
  transition: background 0.3s ease, transform 0.25s ease-in-out;
  z-index: 99999;
  will-change: transform;

  &.hidden:not(:focus-within) {
    transform: translateY(-100%);
  }

  &.intersecting {
    background: var(--c-bg-pr);
  }

  a:not(.btn) {
    padding: 0.5rem 0;
  }

  .btn:not(#menu-button) {
    font-size: var(--fs-se);
    font-weight: 500;
    line-height: 1.25;
    padding: 0.25rem 0.375rem;
  }

  .btn-patreon {
    gap: 0.3rem;
  }

  .svg-patreon {
    width: 0.875rem;
    height: 0.875rem;
  }
}

#title {
  font-size: var(--fs-se);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: fit-content;

  & > svg {
    width: 1.125rem;
    height: 1.125rem;
  }
}

#menu-button {
  display: none;
  align-items: center;
  margin-left: -0.5rem;
  padding: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
}

.show-menu #menu-button {
  padding: 0.375rem;
}

#menu-wrap {
  margin: 0 auto;

  &.no-transition {
    transition: none!important;
  }
}

#menu ul {
  font-size: var(--fs-se);
  font-weight: 500;
  letter-spacing: 1px;
  list-style: none;
  display: flex;
  gap: 3rem;
  padding: 0;
}

#user-ctrl-wrap {
  font-size: var(--fs-se);
  font-weight: 500;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

#color-button {
  --btn-color-a: var(--c-a-sp-blue);
  margin-right: -0.25rem;
  padding: 0.375rem!important;

  svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

#bg {
  object-fit: cover;
  object-position: bottom center;
  width: 100%;
  height: 100lvh;
  position: fixed;
  top: 0;
  transform: translateZ(0);
  user-select: none;
  pointer-events: none;
  z-index: -9999;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #header {
    transition: background 0.3s ease, transform 0s ease-in-out;
  }
}

@media (hover: none) and (pointer: coarse) {
  #header:not(.intersecting):not(.stories:not(.idx.stories) #header) {
    background: var(--c-bg-pr);
  }

  #header.hidden:focus-within {
    transform: translateY(-100%);
  }

  #bg {
/*    display: none;*/
  }
}

@media screen and (min-width: 850px) {
  #header:not(.intersecting) {
    #menu a,
    #user-ctrl-wrap a {
      opacity: 0.92;
      transition: color 0.3s ease, opacity 0.3s ease;
    }

    #menu a,
    #user-ctrl-wrap a {
      &:hover {
        opacity: 1;
      }
    }
  }
}

@media screen and (max-width: 850px) {
  #header {
    grid-template-columns: min-content 1fr 1fr;
    gap: 0.5rem;

    &.show-menu.hidden {
      transform: none;
    }

    #menu a {
      display: block;
      padding: 1rem;
    }
  }

  #menu-button {
    display: flex;
  }

  #menu-wrap {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(12, 12, 12, 0.5);
    backdrop-filter: blur(8px);
    transition: opacity 0.25s ease, visibility 0.25s ease-in-out, background 0.25s ease, backdrop-filter 0.25s ease;
    transition-delay: 0s, 0.25s, 0s, 0s;
    z-index: -1;
  }

  .show-menu #menu-wrap {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  #menu ul {
    font-size: var(--fs-h2);
    text-align: center;
    flex-direction: column;
    gap: 1.5rem;
  }

  #user-ctrl-wrap {
    margin-left: auto;
    white-space: nowrap;
  }
}

@media screen and (max-width: 400px) {
  #title span {
    display: none;
  }
}

/* Beach */
#beach {
  overflow-x: auto;
  overscroll-behavior-x: none;
  display: flex;
  gap: 3.5rem;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 8rem;
  margin: 6rem 0 0;
  padding: 6rem 1.5rem 3rem;
}

/* Messages */
.bottle {
  flex-grow: 0;
  flex-shrink: 0;
  width: 128px;
  height: 128px;
  position: relative;
  transition: filter 0.25s ease;

  &:hover,
  &:focus,
  &:focus-within {
    filter: var(--ef-bottle);
  }
}

.btn-bottle {
  padding: 0;
  position: absolute;
  inset: 0;
}

.message-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.modal.message-modal [data-modal-close-target] {
  position: absolute;
  left: calc(100vw - 4rem);
  top: 0.75rem;
  z-index: 10;
}

@media screen and (max-width: 600px) {
  .modal.message-modal [data-modal-close-target] {
    left: calc(100vw - 3.25rem);
    top: 0.25rem;
  }
}

.modal.message-modal .modal-content-wrap {
  overflow-y: unset;
  max-width: 600px;
  width: 100%;
  height: 90vh;
  height: 90dvh;
  background: none;
  border-radius: 0;
}

.message-title {
  text-align: center;
  text-wrap: balance;
  max-width: calc(100% - 6.5rem);
  margin: 0 auto;
}

.message-return-link {
  max-width: calc(100% - 1.5rem);
  margin: 0 auto 0.5rem;
}

.message-modal .modal-content {
  overflow-y: auto;
  gap: 1.5rem;
}

.message-modal-content {
  overflow-y: auto;
  flex-grow: 1;
  padding: 2.5rem;
  background: var(--c-bg-pr);
}

@media screen and (max-width: 600px) {
  .message-modal-content {
    padding: 1.5rem 1.15rem;
  }
}

.modal ::-webkit-scrollbar,
.story-toc-wrap::-webkit-scrollbar {
  width: 8px;
}

.modal ::-webkit-scrollbar-thumb,
.story-toc-wrap::-webkit-scrollbar-thumb {
  background: var(--c-bg-te);
  border-radius: 9999px;
}

/* Site Footer */
#footer {
  font-size: var(--fs-te);
  padding: 0 1rem 1rem;
}

#footer-menu {
  display: flex;
  margin: 0 0 0.5rem;
}

.social {
  width: 2.25rem;
  height: 2.25rem;

  &:first-child {
    margin-left: -0.5rem;
  }
}

#footer-title,
.social {
  & > svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

#colophon {
  color: var(--c-t-te);
  font-size: var(--fs-qu);
  font-weight: 500;
  line-height: 1.1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;

  a {
    text-decoration: underline;

    &:not(:hover) {
      color: var(--c-t-te);
    }
  }

  p {
    margin: 0;
  }
}

#policies {
  display: flex;
  gap: 1rem;
}

#craft {
  margin: 0 auto;
}

#footer-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: 0.5rem;
}

@media screen and (max-width: 768px) {
  #colophon {
    flex-direction: column;
    align-items: flex-start;
  }

  #craft {
    margin: 0;
  }
}

/* Modal */
.modal {
  color: var(--c-t-pr);
  opacity: 0;
  overflow: hidden;
  display: none;
  max-width: 100%;
  width: 100%;
  max-height: 100vh;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  border: none;
  transition: opacity 0.25s ease-in-out, overlay 0.25s ease-in-out allow-discrete, display 0.25s ease-in-out allow-discrete;
  z-index: 999999;

  &[open] {
    opacity: 1;
    display: block;
  }

  &::backdrop {
    background: rgba(0, 0, 0, 0);
  }
}

.modal-content-wrap {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  min-height: 66vh;
  min-height: 66dvh;
  max-height: calc(90% - 2rem);
  width: calc(100% - 2rem);
  margin-left: calc(0.5 * var(--w-scrollbar));
  position: absolute;
  top: 50vh;
  top: 50dvh;
  left: 50vw;
  background: var(--c-bg-pr);
  border: none;
  border-radius: 16px;
  transform: translate(-50%, 30%);
  transition: transform 0.4s ease-in;
  z-index: 999999;
}

@media screen and (max-width: 768px) {
  .modal-content-wrap {
    margin-left: unset;
  }
}

.modal[open] .modal-content-wrap {
  transform: translate(-50%, -50%);
  transition: transform 0.4s ease-out;
}

@starting-style {
  .modal[open] {
    opacity: 0;
  }

  .modal[open] .modal-content-wrap {
    transform: translate(-50%, 30%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-content-wrap {
    transform: translate(-50%, -50%);
    transition-duration: 0s;
  }

  .modal[open] .modal-content-wrap {
    transition-duration: 0s;
  }
}

.modal-content {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--c-bo-pr);

  & > .btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.25rem;
    margin-top: -0.15rem;
  }
}

.modal-title {
  color: var(--c-t-se);
  font-size: var(--fs-h2);
  margin: 0;
}

.modal [data-modal-close-target] svg {
  width: 2rem;
  height: 2rem;
}

.modal-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem 0 0;
}

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--c-bo-pr);

  & > button {
    font-size: var(--fs-se);
    display: block;
    margin-left: auto;
    padding: 0.2rem 0.5rem;
  }
} 

/* Content Containers */
.sheet {
  border-radius: 9px;
}

.leaf {
  color: var(--c-t-pr);
  margin: 0 auto;
  padding: 1.5rem;
  position: relative;
  border-radius: 3px;

  &:not(:last-child) {
    margin: 0 auto 3rem;
  }
}

.leaflet {
  width: 100%;
  max-width: calc(350px + 3rem);
  border-radius: 6px;

  .form-control,
  .form-check {
    &:not(:last-child) {
      margin: 0 0 1rem;
    }
  }

  [type="submit"] {
    font-size: var(--fs-pr);
    font-weight: 500;
    width: 100%;
  }
}

.folio,
.flysheet {
  max-width: var(--mw-folio);
  padding: 4.5rem;
}

.flysheet {
  max-width: var(--mw-flysheet);

  &:not(:last-child) {
    margin: 0 auto 9rem;
  }
}

.spread {
  max-width: var(--mw-spread);
  border-radius: 6px;
}

@media screen and (max-width: 768px) {
  .folio,
  .flysheet {
    padding: 3rem 1.5rem;
  }
}

@media screen and (max-width: 600px) {
  .leaf, .spread {
    padding: 1.5rem 1rem;
  }

  .folio {
    padding: 2rem 1rem;
  }

  .flysheet:not(:last-child) {
    margin: 0 auto 6rem;
  }
}

/* Indexes */
.idx-header {
  max-width: var(--mw-idx);
  margin: 0 auto 4.5rem;
  padding: 0 3rem;
  position: relative;

  .front-ctrl-wrap {
    padding: 0;
    right: 3rem;
  }
}

.idx-title {
  font-size: var(--fs-h1-idx);
  text-align: center;
  text-wrap: balance;
  margin: 0;
} 

ul.idx-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  max-width: var(--mw-idx);
  margin: 0 auto;
  padding: 0 3rem;
}

/* Index Pagination */
.front-idx-pagination {
  display: flex;
  justify-content: center;
  max-width: var(--mw-idx);
  margin: 3rem auto 0;
  padding: 0 3rem;
}

ul.front-idx-pagination-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem;

  li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    min-height: 2rem;
  }

  .btn {
    --btn-color: var(--c-t-dark);
    stroke: currentColor;
    font-weight: 500;
    line-height: 1.1;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.5rem;

    &[disabled]:hover {
      cursor: unset;
    }

    &:hover:not([disabled]) {
      --btn-color: var(--c-t-pr);
      --btn-bg: var(--btn-color-a);
      --btn-bo: 2px solid var(--btn-color-a);
    }
  }

  svg {
    width: 1rem;
    height: 1rem;
  }
}

@media screen and (max-width: 1200px) {
  ul.idx-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 800px) {
  ul.idx-list {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .idx-header {
    margin: 0 0 3rem;
    padding: 0 1rem;

    .front-ctrl-wrap {
      padding: 0;
      right: 1rem;
    }
  }

  ul.idx-list {
    padding: 0 1rem;
  }

  .front-idx-pagination {
    padding: 0 1rem;
  }
}

/* Home */
.home-title {
  font-size: var(--fs-h1-idx);
  text-wrap: balance;
  margin: 0;
}

.home-intro {
  text-align: center;
  width: 100%;
}

.home-intro:not(div:last-of-type),
.home-stories-wrap {
  margin: 0 auto 12rem;
}

.home-intro,
.home-stories-wrap {
  max-width: var(--mw-idx);
  padding: 0 3rem;
}

.home-stories-wrap .h1 {
  margin: 0 0 3rem;
}

.home-stories-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
}

@media screen and (max-width: 1000px) {
  .home-intro,
  .home-stories-wrap {
    padding: 0 1.5rem;
  }

  .home-stories-list {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .home-stories-wrap {
    padding: 0 1rem;
  }
}

/* Authentication */
.authentication {
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--h-head) + 1.5rem) 0 0.25rem;
  }

  .leaf {
    margin: 0;
  }

  h1 {
    text-align: center;
    margin: 0 0 1.5rem;
  }

  .btn-patreon-sign-in {
    margin: 1.2rem 0 1.25rem;
  }

  #beach {
    display: none;
  }

  &.sign-in hr {
    margin: 1.5rem 0 1rem;

    @media screen and (max-width: 600px) {
      & {
        margin: 1.25rem 0 1rem;
      }
    }
  }
}

.edit-info hr {
  margin: 1.85rem 0 1.5rem;
}

.edit-info [type="submit"] {
  margin: 1rem 0 0;
}

/* Account */
.account.idx h1.account-title,
.account-wrap {
  max-width: var(--mw-idx);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.account.idx h1.account-title {
  margin: 0 auto 3rem;
}

.account-wrap {
  display: grid;
  grid-template-columns: 1fr 32ch;
  gap: 3rem;
}

@media screen and (max-width: 850px) {
  .account.idx h1:not(.message-title):not(#delete-account-modal h1),
  .account-wrap {
    padding: 0 0.75rem;
  }

  .account-wrap {
    grid-template-columns: 1fr;
  }
}

.account-section {
  &:not(:last-child) {
    margin: 0 0 3rem;
  }

  h2 {
    margin: 0 0 1.5rem;
  }

  ul {
    list-style: none;
    padding: 0;

    .btn {
      text-align: left;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 1rem 1.5rem;
      border-radius: 6px;
    }
  }

  .fa-arrow-up-right-from-square {
    font-size: 85%;
    display: inline-block;
    margin-left: auto;
  }
}

.found-shelf {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 1.5rem;
  max-height: calc(3rem + (3 * 128px));
  min-height: calc(3rem + 128px);

  .bottle {
    width: unset;
    height: unset;
  }
}

#delete-account-modal {
  .modal-content-wrap {
    width: 100%;
    max-width: calc(400px + 3rem);
    min-height: unset;
    padding: 1.5rem;
  }

  p:not(:last-child) {
    margin: 0 0 1rem;
  }
} 

.delete-account-modal-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 0.5rem 0 0;
}

@media screen and (max-width: 600px) {
  #delete-account-modal {
    max-width: calc(100% - 1.5rem);
  }
}

@media screen and (max-width: 350px) {
  .delete-account-modal-buttons {
    grid-template-columns: 1fr;
  }
}

/* Stories */
.stories.idx {
  .idx-header:not(:first-of-type) {
    margin: 0 auto 1.5rem;
  }

  h2 {
    text-align: left;
  }
} 

ul.story-list-simple {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  max-width: var(--mw-idx);
  margin: 0 auto;
  padding: 0 3rem;

  &:not(:last-child) {
    margin: 0 auto 6rem;
  }
}

@media screen and (max-width: 1000px) {
  ul.story-list-simple {
    grid-template-columns: 1fr;
    padding: 0 1.5rem;
  }
}

.story-header {
  position: relative;
}

.story-picture {
  display: block;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  pointer-events: none;
  user-select: none;
}

@media (hover: none) and (pointer: coarse) {
  .story-picture {
    min-height: 444px;
    height: unset;
  }
}

.story-title-wrap {
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.story-group-content,
.story-content {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 6px 6px;
}

.story-content {
  max-width: calc(950px + 9rem);
  margin: 0 auto!important;

  .front-ctrl-wrap {
    padding-right: 1.5rem;
    top: -8rem;
  }
}

.story-ctrl {
  overflow-x: auto;
  overscroll-behavior-x: none;
  display: flex;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  padding: 0 1rem;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.5rem);
  transform: translateX(-50%);

  .btn {
    font-size: var(--fs-pr);
    font-weight: 500;
    text-wrap: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

.story-info {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 3rem;
}

.story-schedule {
  font-size: var(--fs-se);
  font-weight: 500;
  margin: 0 0 1rem;
  padding: 0.65rem 1rem;
  background: var(--c-bg-se);
  border-radius: 9px;
  transition: background 0.3s ease;
}

.story-serialization-status {
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.story-metadata {
  font-size: var(--fs-pr);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-wrap: pretty;
}

.story-creatives {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;

  & > * {
    display: grid;
    grid-template-columns: 9.5ch 1fr;
    gap: 0.5rem 1rem;
  }

  & > * > :first-child {
    font-weight: 600;
  }

  ul {
    list-style: none;
    padding: 0;
  }
}

.story-metadata .content-date {
  font-size: var(--fs-te);
}

.story-chapters {
  padding: 1.5rem 0 0;

  h2 {
    font-size: var(--fs-h1);
    text-align: center;
  }
}

.story-chapters-search {
  flex-grow: 1;
}

.story-chapters-ctrl {
  font-size: var(--fs-te);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1rem 0 .75rem;
  padding: 1px 0 0;

  svg {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: -0.375rem;
  }
}

.modal .story-chapters-ctrl {
  margin: 0 0 0.5rem;
}

.story-toc-wrap {
  overflow-y: auto;
  max-height: 34.375rem;
}

.story-toc {
  thead {
    position: sticky;
    top: 0;
    background: var(--c-bg-pr);
    transition: background 0.3s ease;
  }

  @media screen and (max-width: 850px) {
    thead {
      position: static;
    }
  }

  tr:first-child th {
    border-top: unset;
  }

  td:last-child,
  th:last-child {
    vertical-align: top;
    text-align: right;
    width: 13.25rem;
  }

  @media screen and (max-width: 600px) {
    td:last-child,
    th:last-child {
      width: 10rem;
    }
  }
}

.modal .story-toc {
  td:last-child,
  th:last-child {
    text-align: left;
    width: unset;
  }
}

.story-toc,
.toc-list {
  & a {
    font-weight: 500;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0.5rem;
    text-wrap: balance;
  }
}

/*.toc-list [aria-current] {
  border: 2px solid #e1a400;
}

.toc-list [aria-current]:hover {
  border: 2px solid transparent;
}*/

.toc-list .toc-lock {
  height: 1.15em; /* line-height */
}

.story-toc .toc-lock {
  height: 1.5em; /* line-height */
}

.story-related {
  padding: 6rem 0 0;
}

@media screen and (max-width: 850px) {
  .story-content {
    padding: 1.5rem 1.5rem 2rem;
  }

  .story-info {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .story-ctrl {
    justify-content: start;
    gap: 1.5rem;
    padding: 0 1.5rem;
    left: 0;
    transform: none;
  }
}

@media screen and (max-width: 600px) {
  ul.story-list-simple {
    padding: 0 1rem;
  }

  .story-content {
    padding: 1rem 1rem 1.5rem;
  }

  .story-chapters-ctrl {
    gap: 1rem;
  }

  .story-related {
    padding: 3rem 0 0;
  }

  .story-toc,
  .toc-list {
    & a {
      gap: 0.25rem;
    }
  }

  .toc-lock svg {
    width: 1em;
    height: 1em;
  }

  .toc-list .toc-lock {
    margin-top: -0.025em;
  }
}

@media screen and (max-width: 450px) {
  .stories {
    .story-toc {
      tr {
        display: flex;
        flex-direction: column;
      }

      th:last-child {
            word-break: normal;
            word-wrap: normal!important;
            clip: rect(1px, 1px, 1px, 1px);
            -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
            overflow: hidden;
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            border: 0;
          }

      td:last-child {
        text-align: left;
        width: unset;
        padding: 0 0.5rem 0.5rem;
        border: none;
      }

      td:last-child::before {
        content: "Date";
        font-weight: 600;
        margin-right: 0.3rem;
      }
    }
  }
}

@media screen and (max-width: 400px) {
  .story-ctrl {
    justify-content: start;
    gap: 1rem;
    padding: 0 1rem;
    left: 0;
    transform: none;
  }
}

/* General Reading */
.content-header,
.content-footer {
  font-size: var(--fs-se);
  padding: 1.25rem 0;
  border-top: 2px solid var(--c-bo-pr);
  border-bottom: 2px solid var(--c-bo-pr);
  transition: border-color 0.3s ease;
}

.content-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.35rem 0 1.4rem;
}

.content-authors {
  font-size: var(--fs-pr);
  font-weight: 500;
}

.content-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.content-header + img,
h1 + img {
  margin: 0.75rem 0 1.5rem;
}

.content-upsell-wrap {
  margin: 1.5rem 0;
  border-top: 2px solid var(--c-bo-pr);
}

.stories .content-upsell-wrap {
  margin: 1.5rem 0 0;
  border-bottom: 2px solid var(--c-bo-pr);
}

.content-upsell {
  max-width: 385px;
  margin: 0 auto;
  padding: 1.5rem 0 0.65rem;
}

.stories .content-upsell {
  padding: 1.5rem 0 2rem;
}

.content-footer {
  display: flex;
  flex-direction: column;
  margin: 1.5rem 0 0;
  gap: 0.5rem;
}

.meta-svg svg {
  width: 1rem;
  height: 1rem;
  margin: -0.25rem 0.25rem 0 0;
}

@media screen and (max-width: 600px) {
  .content-upsell {
    margin: 0.5rem 0;
    padding: 1rem 0 0;
  }
}

@media screen and (max-width: 400px) {
  .content-header {
    grid-template-columns: 1fr;
    margin: 1.1rem 0;
    padding: 1rem 0;
  }

  .content-categories {
    justify-content: flex-start;
  }

  .content-upsell {
    margin: 0.5rem 0;
    padding: 1rem 0;

    p {
      margin: 0 0 0.75rem;
    }

    .lock-action-wrap {
      gap: 1.25rem;
    }
  } 

  .content-footer {
    margin: -0.4rem 0 0;
    padding: 1rem 0;
  }
}

/* Chapters */
.chapter-heading,
h1.chapter-heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
}

.chapter-label:not(:only-child) {
  font-size: var(--fs-h2);
  font-weight: 600;
}

.chapter-title {
  margin: 0;
}

@media screen and (max-width: 768px) {
  .chapter-label:not(:only-child) {
    font-size: var(--fs-h3);
  }
}

@media screen and (max-width: 600px) {
  .chapter-heading,
  h1.chapter-heading {
    margin: 0 0 1.35rem;
  }
}

/* Chapter & Post Navigation */
.chapter-nav,
.post-nav {
  display: grid;
  grid-gap: 1.5rem;
  margin: 2rem 0 0;
}

.post-nav {
  grid-template-columns: 1fr;
}

.chapter-nav.has-prev {
  grid-template-areas: "prev toc"
                       "story story";
  grid-template-columns: 1fr 1fr;
}

.chapter-nav.has-prev.has-next {
  grid-template-areas: "next next"
                       "prev toc"
                       "story story";
}

.chapter-nav.has-prev.has-next .next {
  grid-area: next;
}

.chapter-nav.has-prev .prev {
  grid-area: prev;
}

.chapter-nav .btn.toc {
  height: calc(1.15rem + 0.3rem + 1.1rem + (1.15 * var(--fs-pr)));
}

.chapter-nav.has-prev .btn.toc {
  grid-area: toc;
}

.chapter-nav .btn.parent-story-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(1.15rem + 0.3rem + 1.1rem + (1.15 * var(--fs-pr)));;
}

.chapter-nav.has-prev .btn.parent-story-link {
  grid-area: story;
}

.nav-direction {
  color: var(--c-t-se);
  font-size: var(--fs-te);
  font-weight: 600;
  font-variant: small-caps;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0.3rem;
}

.nav-direction-arrow {
  font-size: 0.85rem;

  svg {
    width: 1rem;
    height: 1rem;
  }
}

.nav-title-wrap {
  font-size: var(--fs-pr);
  font-weight: 600;
}

.next .nav-title-wrap {
  font-size: var(--fs-body);
}

@media screen and (max-width: 600px) {
  .chapter-nav,
  .post-nav {
    margin: 1.5rem 0 0;
  }

  .chapter-nav.has-prev {
    grid-template-columns: 1fr;
  }

  .chapter-nav.has-prev,
  .chapter-nav.has-prev.has-next {
    grid-template-areas: "next"
                         "prev"
                         "toc"
                         "story";
  }
}

/* Table of Contents */
#toc {
  .modal-content-wrap {
    font-size: var(--fs-pr);
    max-width: 68ch;
  }

  .modal-header {
    padding: 1.5rem 1.5rem calc(1rem - 1px);
    border-bottom: unset;
  }

  h1 {
    margin: 0;
  }

  .modal-body {
    overflow-y: auto;
    padding: 0 1.5rem 1.5rem;
  }

  .btn-nav {
    text-align: left;
  }

  @media screen and (max-width: 600px) {
    .modal-content-wrap {
      width: calc(100% - 1.5rem);
    }

    .modal-header {
      padding: 1rem;
    }

    .modal-header > .btn {
      margin-right: -0.5rem;
    }

    .modal-body {
      padding: 0 1rem 1rem;
    }
  }
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;

  li:not(:last-child) {
    margin: 0 0 1rem;
  }
}

.toc-lock {
  display: flex;
  align-items: center;
}

/* Restriction */
.lock-notice {
  max-width: 385px;
  margin: 2.375rem auto 3rem;
  padding: 1.5rem;
  background: var(--c-bg-se);
  border-radius: 16px;
  box-shadow: 0 1px 6px rgb(0 0 0 / 20%), 0 1px 16px rgb(0 0 0 / 5%);
  transition: background 0.3s ease;

  h2 {
    text-wrap: unset;
  }

  p {
    text-indent: 0!important;
  }
}

.content-header + .lock-notice {
  margin: 3rem auto;
}

.read .lock-notice {
  margin: 0 auto 3rem;
}

@media screen and (max-width: 600px) {
  .read .lock-notice {
    margin: 1.5rem 0 2rem;
  }
}

@media screen and (max-width: 400px) {
  .content-header + .lock-notice {
    margin: 1.5rem 0 2rem;
  }

  .read .lock-notice {
    margin: -0.25rem 0 2rem;
  }
}

.lock-action-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  .btn-patreon,
  .btn-patreon-sign-in {
    font-weight: 600;
    padding: 0.45rem 1rem;
  }
}

.lock-action-wrap,
.authentication .leaf {
  & .svg-patreon {
    width: 1.25rem;
    height: 1.25rem;
    margin-bottom: -0.125rem;
  }
}

.lock-tooltip {
  font-size: var(--fs-se);
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  width: max-content;
  padding: 0.25rem 0.375rem;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--c-bg-dark);
  border-radius: 6px;
  transition: 0.25s opacity ease-in-out, 0.25s visibility ease-in-out;
  z-index: 5;
}

svg.svg-lock-regular,
svg.svg-unlock-regular {
  width: 1.125rem;
  height: 1.125rem;
}

.toc-lock,
.card {
  svg.svg-lock-regular,
  svg.svg-unlock-regular {
    width: 1.25rem;
    height: 1.25rem;
  }

  @media screen and (max-width: 600px) {
    svg.svg-lock-regular,
    svg.svg-unlock-regular {
      width: 1rem;
      height: 1rem;
    }
  }
}

.toc-lock {
  svg.svg-lock-regular,
  svg.svg-unlock-regular {
    margin-bottom: -0.125rem;
  }
}

.meta-svg {
  svg.svg-lock-regular,
  svg.svg-unlock-regular {
    margin: -0.25rem 0.125rem 0 calc(-0.125rem / 4);
  }
}

a.card {
  --c-t-pr: #ffffff;
  color: var(--c-t-pr);
  position: relative;
  border-radius: 6px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;

  &:hover {
    box-shadow: 0 0 4px var(--c-a-card), 0 2px 10px 3px var(--c-a-card), 0 2px 16px var(--c-a-card);
    transform: translateY(-0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  a.card {
    transition: box-shadow 0.3s ease;
  }
}

.card-bg {
  object-fit: cover;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  user-select: none;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.card-lock {
  display: flex;
  padding: 0 0 1rem;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;

  &:hover .lock-tooltip {
    opacity: 1;
    visibility: visible;
  }
}

.card-parent {
  font-size: var(--fs-te);
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 89%;
  position: absolute;
  top: 0.75rem;
}

.tag {
  color: var(--c-t-pr);
  white-space: nowrap;
  width: fit-content;
  padding: 0.25rem 0.375rem;
  background: var(--c-bg-te);
  border-radius: 6px;
  transition: color 0.3s ease, background 0.3s ease;
}

.card .tag {
  background: rgb(0 0 0 / 75%);
}

.card-date {
  font-size: var(--fs-te);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 0.25rem;
  text-shadow: var(--ts-card);
}

.card-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: var(--ts-card);
  text-wrap: balance;
}

.card-story-home {
  display: block;
  height: min-content;
  border-radius: 6px;
  background: var(--c-bg-pr);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;

  .h2 {
    margin: 0 0 1rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .card,
  .card-story-home,
  .card-story-simple {
    box-shadow: var(--bs-crisp);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-story-home {
    transition-duration: 0s;
  }
}

img.card-story-home-img {
  object-fit: cover;
  object-position: top center;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 6px 6px 0 0;
}

.card-story-home-info {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  border-radius: 0 0 6px 6px;
}

.card-story-home-ctrl {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card-story-home-ctrl .btn {
  flex-grow: 1;
}

a.card-story-simple {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  background: var(--c-bg-pr);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

a.card-story-simple,
.card-story-home {
  &:hover {
    box-shadow: 0 0 4px var(--c-a-card), 0 2px 10px 3px var(--c-a-card), 0 2px 16px var(--c-a-card);
    transform: translateY(-0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  a.card-story-simple,
  .card-story-home {
    transition-duration: 0s;
  }
}

.card-story-simple-img {
  object-fit: cover;
  object-position: top center;
  width: 100%;
  max-height: 65vh;
  aspect-ratio: 16 / 9;
  border-radius: 6px 6px 0 0;
}

.card-story-simple-img[src=""],
.card-story-home-img[src=""] {
  display: none;
}

.card-story-simple-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
  background: var(--c-bg-pr);
  border-radius: 0 0 6px 6px;
}

.card-story-simple-info .h2,
.card-story-home .h2:last-child {
  margin: 0;
}

@media screen and (max-width: 600px) {
  .card-story-simple-info {
    padding: 1rem;
  }
}

/* Front Controls */
.front-ctrl-wrap {
  font-size: var(--fs-te);
  display: flex;
  align-items: center;
  position: absolute;
  top: -3.5rem;
  right: 0;
}

.front-ctrl-wrap {
  .btn {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    padding: 0.25rem 0.375rem;
  }

  svg {
    width: 0.75rem;
    height: 0.75rem;
  }
}

@media screen and (max-width: 768px) {
  .front-ctrl-wrap {
    padding: 0 1rem;
  }
}

/* Blank */
.page-blank:not(.editor) #header > :not(#title-wrap) {
  display: none;
}

.page-blank #footer {
  display: none;
}

/* Utility */
[hidden] {
  display: none!important;
}

.srt {
  word-break: normal;
  word-wrap: normal!important;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  overflow: hidden;
  position: absolute!important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

a.skip-link:focus {
  color: var(--c-t-a);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  display: block;
  clip: auto!important;
  -webkit-clip-path: none;
  clip-path: none;
  top: 5px;
  left: 5px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  background-color: var(--c-bg-se);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* Customizations */
.the-measure-of-throneworthies {
  --c-a-card: #cfa921;

  *.card .card-bg {
    object-position: top;
  }
}