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

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

/* Prevent mobile/browser font-size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default bottom margins for common elements */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles only for lists explicitly marked as role="list" */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Core body defaults */
body {
  min-height: 100vh;
  line-height: 1.2;
}

/* Tighter line-height for headings and form elements */
h1,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance heading text wrapping */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* Default link treatment for links without a class */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Responsive media */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit font styles for form elements */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Prevent tiny default textareas */
textarea:not([rows]) {
  min-height: 10em;
}

/* Offset anchor jumps */
:target {
  scroll-margin-block: 5ex;
}

/* ------------------------------
   Scale Variables
------------------------------ */

:root {
  --text-sm: 0.75rem;
  --text-base: 1rem;
  --text-lg: 2rem;

  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  --site-gutter: var(--space-md);
  --content-inset: var(--space-xl);
}

/* ------------------------------
   Site Layout
------------------------------ */

/* Typefaces */
@font-face{
    font-family: 'Martina Plantijn';
    src: url('../type/martina-plantijn-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Martina Plantijn';
    src: url('../type/martina-plantijn-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

html,
body {
  margin: 0;
  font-family: 'Martina Plantijn', serif;
  font-size: 20px;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: var(--site-gutter);
  background-color: white;
}

main {
  flex: 1 0 auto;
  margin: 0 var(--content-inset);
}

footer {
  margin-block-start: auto;
}

.compress-width {
  margin: 0 var(--space-xl);
}

figure {
  margin-block-start: 0;
  margin-block-end: 1rem;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

p{
  margin-block-start: var(--space-md);
  text-wrap: pretty;
}

ul {
  padding-inline-start: 0;
  margin-block-start: var(--space-md);
  margin-block-end: var(--space-lg);
}

.published_list ul{
  margin-block-start: calc(var(--space-xs) + 1px);
}

li {
  list-style: none;
  margin-block-end: var(--space-md);
}


/* ------------------------------
   Typography / Links / Buttons
------------------------------ */

h1 {
  font-size: var(--text-base);
  font-weight: normal;
  margin-block-start: 0;
}

h2{
  font-size: var(--text-base);
  font-weight: normal;
  margin-block-start: 0;
}

code{
  font-size: var(--text-sm);
  font-family: unset;
  display: block;
  margin-block-start: var(--space-xs);
}

a,
a:visited {
  color: black;
}

@media (hover: hover) {
  a:hover {
    text-decoration: none;
  }

  button:hover {
    background-color: #eaeaea;
  }

  .outside-link{
    display: inline-block;
  }

  .outside-link:hover::after {
    content: '↗';
  }
}

button {
  all: unset;
  cursor: pointer;
  display: inline-block;
  background-color: unset;
  border: 1px solid black;
  padding: var(--space-xs);
}

select {
  border: 1px solid black;
  background-color: unset;
  overflow: hidden;
  /*-webkit-appearance: none; /* Removes native iOS styling */
  -webkit-tap-highlight-color: transparent;
  /*-moz-appearance: none;*/
  /*appearance: none;*/
  color: black !important;
}

/* Remove the iOS focus glow */
select:focus {
  outline: none;
  box-shadow: none;
  /*-webkit-appearance: none; /* Helps flatten native iOS styling if needed */
}

.meta-text {
  font-size: var(--text-sm);
  font-family: 'Martina Plantijn', serif;
}


/* ------------------------------
   Header / Fixed Site Elements
------------------------------ */

header h1 a {
  font-size: 2.2rem;
  text-decoration: none;
}

.site-title {
  z-index: 997;
  position: fixed;
  top: calc(var(--space-md) - 5px);
  left: var(--space-md);
}

#cart-open-button {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 999;
}

.site-contact {
  position: fixed;
  bottom: var(--space-md);
  left: var(--space-md);
}


/* ------------------------------
   Cart Modal
------------------------------ */

.cart-modal {
  background-color: white;
  border-left: 1px solid black;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 998;
  width: 520px;
  padding: var(--space-md);
  inset: 0 0 0 auto;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}



@media (max-width: 800px) {
  .cart-modal {
    width: 100%;
    inset: 0;
  }
}

.cart-modal__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: var(--space-md);
  margin-block-start: var(--space-sm);
}

#cart-title{
  margin-block-start: calc(var(--space-xs) + 1px);
}

.cart-table tr {
  border-top:1px solid black;
}

.cart-table thead tr{
  border-top: none;
}

.cart-table th,
.cart-table td {
  text-align: left;
  padding: 0.35rem 0;
  vertical-align: middle;
  font-weight: normal;
  padding-right: var(--space-xs);
}


.cart-table td:last-child{
  padding-right: 0;
}

.quantity_cell{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 110px;
}

.cart-table th:nth-child(3),
.cart-table td:nth-child(3),
.cart-table th:last-child,
.cart-table td:last-child {
  text-align: right;
}

.cart-qty-button {
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid black;
  border-radius: 90px;
  text-align: center;
  font-size: var(--text-base);
  line-height: 0;
}

.cart-qty-button:disabled {
  opacity: 0.3;
  cursor: unset;
  background-color: white;
}

.cart-totals{
  margin-block-end: var(--space-sm);
}

.cart-notice {
  margin-top: auto;
}

/* ------------------------------
   Homepage Publication List
------------------------------ */

.publication-list__item--disabled {
  opacity: 0.4;
}

.publication-list__title--disabled {
  cursor: unset;
}


/* ------------------------------
   Publication Page
------------------------------ */

.publication__header {
  text-align: center;
  margin-block-start: calc(var(--space-xs) + 1px);
  margin-block-end: var(--space-lg);
}

.publication__title {
}

.publication__preorder-note{
  display: inline-block;
}

.publication__intro {
  margin-block-end: var(--space-md);
}

.publication__description{
  margin-block-end: var(--space-md);
  hyphens: auto;
}

.publication__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-block-end: var(--space-lg);
  grid-column-gap: var(--space-xs);
}


/* ------------------------------
   Publication Gallery
------------------------------ */

.publication__gallery-frame {
  position: relative;
}

.publication__gallery-slide {
  display: none;
  margin: 0;
}

.publication__gallery-slide.is-active {
  display: block;
}

.publication__gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.publication__gallery-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border: 0;
  background: transparent;
  color: transparent;

  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;

  user-select: none;
  -webkit-user-select: none;
}

.publication__gallery-nav:focus {
  outline: none;
}

.publication__gallery-nav:hover {
  background: transparent;
}

.publication__gallery-nav--prev {
  left: 0;
  cursor: w-resize;
}

.publication__gallery-nav--next {
  right: 0;
  cursor: e-resize;
}

.publication__gallery-counter {
  text-align: center;
  font-variant-numeric: oldstyle-nums;
}

.spacer{
  margin-block-end: var(--space-lg);
}


/* ------------------------------
   Publication Overview Columns
------------------------------ */

.publication-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: var(--space-xs);
  margin-block-start: var(--space-md);
  margin-block-end: var(--space-md);
}

.publication-overview ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.publication-overview__column ul{
  margin-block-end: var(--space-md);
}

.publication-overview li {
  margin-block-end: var(--space-sm);
}

.publication-overview a {
  color: inherit;
}

.overview-column-heading{
  margin-block-end: var(--space-md);
}

.publication-overview .is-disabled {
  opacity: 0.4;
}

.publication-overview .is-disabled span {
  cursor: unset;
}


/* ------------------------------
   Footer
------------------------------ */

hr {
  border: none;
  border-top: 1px solid #000;
  height: 0;
  width: 100%;
  margin-block-end: 0;
  margin-block-start: 0;
}


/* ------------------------------
   Responsive
------------------------------ */

@media (max-width: 1200px) {
  .site-contact {
    width: 200px;
  }
}

@media (max-width: 800px) {
  .publication-overview {
    grid-template-columns: 1fr;
  }

  .overview-column-heading{
    margin-block-end: var(--space-sm);
  }

  .publication__meta {
    grid-template-columns: 1fr;
    margin-block-end: var(--space-lg);
  }

  .cart-modal {
    width: 100%;
    border-left: none;
  }
}

@media (max-width: 660px) {
  body {
    width: 100%;
  }

  body.cart-is-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

  main {
    margin: 0 var(--space-sm);
  }

  .compress-width {
    margin-left: var(--space-sm);
    margin-right: var(--space-sm);
  }

  .publication__header{
        margin-block-start: var(--space-md);
        margin-block-end: var(--space-lg);
  }

  :root {
    --content-inset: var(--space-sm);
    --site-gutter: var(--space-sm);
  }

  .site-header{
    margin: var(--space-sm);
    font-size: var(--text-base);
    display: flex;
    justify-content: space-between;
  }

  #cart-open-button {
    position: relative;
    top: 0;
    right: 0;
  }

  .site-footer{
    margin-block-end: var(--space-sm);
  }

  .site-title {
    position: relative;
    padding-top: calc(var(--space-xs) + 2px);
        top: 0;
        left: 0;
  }

  header h1 a{
    font-size: var(--text-base);
  }

  .site-contact {
    position: relative;
    top: 0;
    left: 0;
    width: unset;
    font-size: var(--text-sm);
  }
}

@media (max-width: 520px) {


  .quantity_cell{
    width: 100px;
    padding-right: var(--space-xs);
  }


}