/* Entry point for your PostCSS build */

@-o-viewport {
  zoom: 1;
  width: extend-to-zoom;
}

@viewport {
  zoom: 1;
  width: extend-to-zoom;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  border: 0;
  background: transparent;
  font-feature-settings: "kern", "liga", "pnum";
  -webkit-backface-visibility: visible;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  webkit-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

blockquote,
q {
  quotes: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

* {
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 15px;
  --width: 24rem;
  --menu-width: 8rem;
  --text-xs: 0.9rem;
  --text-sm: 1rem;
  --text-md: 1.3rem;
  --text-lh: 1.325;
  --serif: "Times New Roman", serif;
  --sans: "Helvetica Neue", sans-serif;
  --white: #fafafa;
  --black: #080808;
  --grey: #888888;
  --red: #fb4f27;
  --yellow: #ffef40;
  --color: #080808;
  --faint: #f3f3f3;
  --error: var(--red);
}

@media screen and (min-width: 880px) {
  html {
    font-size: 18px;
  }
}

body {
  --bg: var(--white);
  --accent: var(--yellow);
  background-color: var(--bg);
  color: var(--color);
  font-size: var(--text-sm);
  line-height: var(--text-lh);
  font-family: var(--serif);
}

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

body a:hover,
body a:link:hover,
body a:visited:hover {
  background-color: var(--accent);
}

::-moz-selection {
  color: var(--bg);
  background: var(--color);
}

::selection {
  color: var(--bg);
  background: var(--color);
}

::-moz-placeholder {
  color: var(--color);
  opacity: 0.5;
}

::placeholder {
  color: var(--color);
  opacity: 0.5;
}

input[type="email"],
input[type="text"],
input[type="password"],
input[type="number"] {
  border: 1.55px solid var(--color);
  color: var(--color);
  background-color: var(--bg);
  font-size: var(--text-sm);
  line-height: 1.2;
  border-radius: 1rem;
  padding: 0.125rem 0.625rem;
  font-family: var(--serif);
}

input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
  outline: 0;
  box-shadow: var(--color) 0 0 0 1px;
}

textarea {
  border: 1.55px solid var(--color);
  color: var(--color);
  background-color: var(--bg);
  font-size: var(--text-sm);
  line-height: 1.2;
  border-radius: 1rem;
  padding: 0.125rem 0.625rem;
  font-family: var(--serif);
  resize: none;
  height: 6rem;
}

textarea:focus {
  outline: 0;
  box-shadow: var(--color) 0 0 0 1px;
}

select {
  -webkit-appearance: none;
  border: 1.55px solid var(--color);
  color: var(--color);
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.5rem auto;
  background-image: url("data:image/svg+xml,%3Csvg width='16px' height='11px' viewBox='0 0 16 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8.43393602,11 C9.13120074,9.52138493 10.0324525,8.08757637 11.1376912,6.69857434 C12.24293,5.3095723 13.8636996,3.65173116 16,1.72505092 L16,0 C13.0180807,1.40393754 9.60222531,3.96164291 8,5.5 C6.57579972,4.36490156 4.39128419,2.48676171 3.69401947,2.03869654 C2.99675475,1.59063136 1.76541493,0.926001358 0,0.0448065173 L0,1.74745418 C2.15113584,3.73387644 3.78674084,5.45145961 4.90681502,6.90020367 C6.0268892,8.34894773 6.86138155,9.7155465 7.41029207,11 L8.43393602,11 Z' id='↓' fill='%23000000' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  font-size: var(--text-sm);
  line-height: 1.2;
  border-radius: 1rem;
  padding: 0.125rem 1.25rem 0.125rem 0.625rem;
  font-family: var(--serif);
}

.inline-button,
a.inline-button,
a.inline-button:link,
a.inline-button:visited {
  background-color: var(--bg);
  border: 1.55px solid var(--color);
  color: var(--color);
  font-size: var(--text-sm);
  line-height: 1.2;
  border-radius: 1rem;
  padding: 0.125rem 0.625rem;
  font-family: var(--serif);
  white-space: nowrap;
}

.inline-button:hover,
a.inline-button:hover,
a.inline-button:link:hover,
a.inline-button:visited:hover {
  cursor: pointer;
  background-color: var(--bg);
}

.inline-button:hover:after,
a.inline-button:hover:after,
a.inline-button:link:hover:after,
a.inline-button:visited:hover:after {
  content: " \2192";
}

.p-button,
input.p-button,
button.p-button,
a.p-button,
a.p-button:link,
a.p-button:visited {
  display: block;
  margin-left: 2rem;
  margin-top: -0.5rem;
  width: 16rem;
  overflow: hidden;
  background-color: var(--bg);
  border: 1.55px solid var(--color);
  color: var(--color);
  font-size: var(--text-sm);
  line-height: 1.2;
  border-radius: 1rem;
  padding: 0.125rem 0.625rem;
  font-family: var(--serif);
  text-align: left;
  text-indent: 0;
}

.p-button:hover,
input.p-button:hover,
button.p-button:hover,
a.p-button:hover,
a.p-button:link:hover,
a.p-button:visited:hover {
  cursor: pointer;
  background-color: var(--bg);
}

.p-button:hover:after,
input.p-button:hover:after,
button.p-button:hover:after,
a.p-button:hover:after,
a.p-button:link:hover:after,
a.p-button:visited:hover:after {
  content: " \2192";
}

.p-button + .p-button,
input.p-button + input.p-button,
button.p-button + button.p-button,
a.p-button + a.p-button,
a.p-button:link + a.p-button:link,
a.p-button:visited + a.p-button:visited {
  margin-top: 0.25rem;
}

.p-button:last-child,
input.p-button:last-child,
button.p-button:last-child,
a.p-button:last-child,
a.p-button:link:last-child,
a.p-button:visited:last-child {
  margin-bottom: 1rem;
}

main.main {
  min-height: calc(100vh - 0.5rem);
  padding: 0 0.5rem;
  margin: 0.25rem 0;
  font-size: var(--text-md);
  overflow: hidden;
}

@media screen and (min-width: 860px) {
  main.main {
    width: var(--width);
    overflow: visible;
    border-right: 1.55px solid var(--color);
  }
}

main.main > *:last-child {
  margin-bottom: 0;
}

main.main div,
main.main p,
main.main ul,
main.main ol,
main.main figure {
  margin-bottom: 1rem;
}

main.main ol + .note {
  margin-top: -1rem;
}

main.main ol + .note:before {
  content: "(";
}

main.main ol + .note:after {
  content: ")";
}

main.main .error {
  background-color: var(--red);
  margin-bottom: 1.8rem;
}

main.main p a,
main.main p a:link,
main.main p a:visited,
main.main ol a,
main.main ol a:link,
main.main ol a:visited,
main.main ul a,
main.main ul a:link,
main.main ul a:visited {
  background-color: var(--faint);
}

main.main p a:hover,
main.main p a:link:hover,
main.main p a:visited:hover,
main.main ol a:hover,
main.main ol a:link:hover,
main.main ol a:visited:hover,
main.main ul a:hover,
main.main ul a:link:hover,
main.main ul a:visited:hover {
  background-color: var(--yellow);
}

main.main p + p {
  margin-top: -1rem;
  text-indent: 2rem;
}

main.main p.-indented {
  text-indent: 2rem;
}

main.main .notes {
  margin-top: 1rem;
  font-size: var(--text-xs);
  font-family: var(--sans);
}

main.main .notes p + ul {
  margin-top: -1rem;
}

main.main .notes ul,
main.main .notes ol {
  padding: 0 2rem 0 3.5rem;
  list-style: outside decimal;
}

main.main h1,
main.main h3 {
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.015rem;
  font-family: var(--sans);
}

main.main h1.-books:before,
main.main h3.-books:before {
  content: "📚 ";
}

main.main .list > li {
  display: inline;
}

main.main .list > li + li:before {
  content: " / ";
}

main.main form div {
  margin-bottom: 0;
}

.form-singleton {
  padding-left: 2rem;
  margin-top: -0.8rem;
  display: block;
}

.form-singleton label {
  display: none;
}

.form-singleton input[type="submit"] {
  flex: 0;
  width: auto;
  -webkit-appearance: none;
  border: 0;
  color: var(--color);
  background-color: var(--bg);
  font-size: var(--text-sm);
  line-height: 1.2;
  font-family: var(--serif);
  padding: 0;
}

.form-singleton input[type="submit"]:hover {
  cursor: pointer;
}

.illustration-block {
  margin: 0;
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: var(--bg);
}

.illustration-block img {
  height: calc(var(--width) * (10.675 / 16));
  box-shadow: 0 0 0 0.5rem var(--bg);
}

.illustration-block img + img {
  margin-left: 0.5rem;
}

.portrait img {
  height: auto;
  width: calc(var(--width) + 1rem);
  display: block;
  margin: 0;
  box-shadow: 0 0 0 0.5rem var(--bg);
}

.illustration {
  display: block;
  margin: 0;
  position: absolute;
  left: calc(var(--width) + 0.5rem);
  overflow: hidden;
  width: 16rem;
}

.illustration img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.purchase-form {
  display: flex;
  flex-direction: row;
  padding-left: 2rem;
  margin-bottom: 1rem;
  margin-top: -0.8rem;
}

.purchase-form .field {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
}

.purchase-form .actions {
  padding: 0;
}

ol.shipments,
ol.progress {
  list-style: inside decimal;
}

ol.shipments .active,
ol.progress .active {
  background-color: var(--yellow);
}

.interval-form .field.-one-liner {
  display: flex;
  flex-direction: row;
}

.interval-form .field.-one-liner label + select,
.interval-form .field.-one-liner label + input,
.interval-form .field.-one-liner label + .input {
  margin-left: 0.5rem;
}

.interval-form .field.-one-liner select {
  margin-top: 0;
}

.redemption-form .field {
  display: flex;
  flex-direction: row;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

form .fields {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

form .fields .field {
  margin-bottom: 0.5rem;
}

form .fields .field label {
  display: block;
  text-indent: 2rem;
}

form .fields .field .input {
  flex: 1;
  display: flex;
  flex-direction: row;
}

form .fields .field .input .field_with_errors {
  flex: 1;
  display: flex;
  flex-direction: row;
}

form .fields .field .input .field_with_errors input,
form .fields .field .input .field_with_errors textarea,
form .fields .field .input .field_with_errors select {
  border: 1.55px solid var(--error);
}

form .fields .field .input .field_with_errors input:focus,
form .fields .field .input .field_with_errors textarea:focus,
form .fields .field .input .field_with_errors select:focus {
  box-shadow: var(--error) 0 0 0 1px;
}

form .fields .field .input input,
form .fields .field .input textarea,
form .fields .field .input select {
  flex: 1;
  display: flex;
  margin-left: 0;
  margin-right: 0;
}

form .fields .field .input.-twofer input {
  width: 0;
}

form .fields .field .input.-twofer input + input {
  margin-left: 0.25rem;
}

form .actions {
  display: flex;
  flex-direction: row;
  padding-top: 0.2rem;
}

form .actions .p-button {
  display: block;
  margin-top: 0;
}

.menu {
  display: block;
  padding: 0.25rem 0;
  margin: 0 0.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.address {
  display: none;
}

@media screen and (min-width: 860px) {
  .menu {
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0.25rem;
    right: 0.5rem;
    width: var(--menu-width);
    text-align: center;
    flex-direction: column;
    align-items: center;
    border: 0;
  }
  .menu .item + .item {
    margin-left: 0;
  }
  .address {
    display: block;
    position: fixed;
    bottom: 0.25rem;
    right: 0.5rem;
    width: var(--menu-width);
    text-align: center;
  }
}