/* julieqiu.dev — site styles.
   Colors, type scale, and layout values mirror the previous site's design settings. */

@import url("/css/fonts.css");

:root {
  --white-hsl: 0, 62.96%, 94.71%;
  --black-hsl: 0, 0%, 1.18%;
  --accent-hsl: 237.45, 37.01%, 24.9%;
  --lightAccent-hsl: 0, 0%, 100%;
  --darkAccent-hsl: 51.88, 100%, 55.1%;

  --white: hsl(var(--white-hsl));
  --black: hsl(var(--black-hsl));
  --accent: hsl(var(--accent-hsl));
  --lightAccent: hsl(var(--lightAccent-hsl));
  --darkAccent: hsl(var(--darkAccent-hsl));

  --maxPageWidth: 1800px;
  --pagePadding: 4vw;
  --sqs-site-gutter: var(--pagePadding);
  --sqs-mobile-site-gutter: 6vw;
  --sqs-site-max-width: var(--maxPageWidth);

  --body-font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading-font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --site-title-font: "Ephesis", "fairwater-script", "Brush Script MT", cursive;

  --v: 1;
}

/* ---------- section themes ---------- */

.white, .page-section:not([class*="light"]):not(.bright):not(.black):not(.dark) {
  --siteBackgroundColor: var(--white);
  --headingColor: var(--black);
  --paragraphColor: var(--black);
  --linkColor: var(--accent);
  --headingLinkColor: var(--accent);
  --primaryButtonBg: var(--accent);
  --primaryButtonText: var(--lightAccent);
  --tertiaryButtonBg: var(--darkAccent);
  --tertiaryButtonText: var(--black);
  --textBlockBg: var(--lightAccent);
}
.white-bold {
  --siteBackgroundColor: var(--white);
  --headingColor: var(--accent);
  --paragraphColor: var(--black);
  --linkColor: var(--accent);
  --headingLinkColor: var(--accent);
  --primaryButtonBg: var(--accent);
  --primaryButtonText: var(--lightAccent);
  --tertiaryButtonBg: var(--accent);
  --tertiaryButtonText: var(--lightAccent);
  --textBlockBg: var(--lightAccent);
}
.light {
  --siteBackgroundColor: var(--lightAccent);
  --headingColor: var(--black);
  --paragraphColor: var(--black);
  --linkColor: var(--accent);
  --headingLinkColor: var(--accent);
  --primaryButtonBg: var(--accent);
  --primaryButtonText: var(--lightAccent);
  --tertiaryButtonBg: var(--darkAccent);
  --tertiaryButtonText: var(--black);
  --textBlockBg: var(--white);
}
.light-bold {
  --siteBackgroundColor: var(--lightAccent);
  --headingColor: var(--accent);
  --paragraphColor: var(--black);
  --linkColor: var(--accent);
  --headingLinkColor: var(--accent);
  --primaryButtonBg: hsl(348, 55.02%, 59.02%);
  --primaryButtonText: var(--lightAccent);
  --tertiaryButtonBg: var(--accent);
  --tertiaryButtonText: var(--lightAccent);
  --textBlockBg: var(--white);
}
.bright {
  --siteBackgroundColor: var(--accent);
  --headingColor: var(--lightAccent);
  --paragraphColor: var(--lightAccent);
  --linkColor: var(--lightAccent);
  --headingLinkColor: var(--lightAccent);
  --primaryButtonBg: var(--lightAccent);
  --primaryButtonText: var(--accent);
  --tertiaryButtonBg: var(--lightAccent);
  --tertiaryButtonText: var(--accent);
  --textBlockBg: var(--lightAccent);
}
.black {
  --siteBackgroundColor: var(--black);
  --headingColor: var(--white);
  --paragraphColor: var(--white);
  --linkColor: var(--lightAccent);
  --headingLinkColor: var(--lightAccent);
  --primaryButtonBg: var(--lightAccent);
  --primaryButtonText: var(--black);
  --tertiaryButtonBg: var(--lightAccent);
  --tertiaryButtonText: var(--black);
  --textBlockBg: var(--white);
}

/* ---------- base ---------- */

html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body-font);
  font-weight: 400;
  line-height: 1.5em;
  color: var(--black);
  background-color: var(--white);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
body.no-scroll { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }

/* Fluid type scale: --v is the size multiplier from the design settings. */
h1, h2, h3, h4, p, .sqsrte-large, .sqsrte-small,
.header-nav-item, .header-menu-nav-item, #site-title,
.sqs-block-button-element, .form-wrapper .title, .form-wrapper .caption, .field-element,
.product-title, .product-price, .product-nav, .product-list-title,
.product-list-item-title, .product-list-item-price, .product-add-to-cart {
  font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v) * 1rem)));
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  h1, h2, h3, h4, p, .sqsrte-large, .sqsrte-small,
  .header-nav-item, .header-menu-nav-item, #site-title,
  .sqs-block-button-element, .form-wrapper .title, .form-wrapper .caption, .field-element,
  .product-title, .product-price, .product-nav, .product-list-title,
  .product-list-item-title, .product-list-item-price, .product-add-to-cart {
    font-size: calc((var(--v) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
}

h1, h2, h3, h4 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  line-height: calc(1.2em * (1 + (1 - var(--v)) / 25));
  margin: 2rem 0;
  color: var(--headingColor, var(--black));
}
h1 { --v: 6; }
h2 { --v: 4; }
h3 { --v: 2.8; }
h4 { --v: 1.6; }
p { --v: 1; margin: 1rem 0; }
p.sqsrte-large, .sqsrte-large { --v: 1.5; }
p.sqsrte-small, .sqsrte-small { --v: 0.9; }
p, li { color: var(--paragraphColor, var(--black)); }
a { color: var(--linkColor, var(--accent)); text-decoration: underline; }
h1 a, h2 a, h3 a, h4 a { color: var(--headingLinkColor, var(--accent)); }
strong { font-weight: 700; }
ul, ol { margin: 1rem 0; padding-left: 1.5em; }
li { margin: 0.5em 0; }
li > p { margin: 0; }
li ul, li ol { margin: 0.25em 0 0; }
.sqsrte-text-color--accent { color: var(--accent); }
.sqsrte-text-color--black { color: var(--black); }
.sqsrte-text-color--white { color: var(--white); }

/* ---------- text highlights (marker / underline shapes) ---------- */

.sqsrte-text-highlight { --hl: var(--accent); position: relative; }
.hl-accent { --hl: var(--accent); }
.hl-white { --hl: var(--white); }
.hl-black { --hl: var(--black); }
.hl-lightAccent { --hl: var(--lightAccent); }
.hl-darkAccent { --hl: var(--darkAccent); }
.hl-marker {
  background-color: var(--hl);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.1em;
}
.hl-underlineCurve::after, .hl-jagged::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 0.32em;
  background-color: var(--hl);
  pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.hl-underlineCurve::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1.5,7.5 C30,1.5 70,1.5 98.5,5.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1.5,7.5 C30,1.5 70,1.5 98.5,5.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hl-jagged::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1,8 L9,2 L17,8 L25,2 L33,8 L41,2 L49,8 L57,2 L65,8 L73,2 L81,8 L89,2 L97,8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1,8 L9,2 L17,8 L25,2 L33,8 L41,2 L49,8 L57,2 L65,8 L73,2 L81,8 L89,2 L97,8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */

.header-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 1em 1.5em;
  background: var(--accent);
  color: #fff;
}
.header-skip-link:focus { left: 1em; top: 1em; }

.header {
  position: relative;
  z-index: 20;
  background-color: var(--lightAccent);
  line-height: 1;
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 2.2vw var(--pagePadding);
}
.header-title { flex: 0 1 auto; min-width: 0; margin-right: 2.4vw; }
#site-title {
  /* 1.9 in the design settings; Ephesis draws smaller than Fairwater Script, so scale up slightly. */
  --v: 2.15;
  font-family: var(--site-title-font);
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.header-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  padding-left: 2.4vw;
}
.header-nav-item {
  --v: 0.9;
  margin: 0 0.8vw;
  white-space: nowrap;
  line-height: 1.5em;
}
.header-nav-item:last-child { margin-right: 0; }
.header-nav-item a, .header-menu-nav-item a {
  color: var(--black);
  text-decoration: none;
  padding-bottom: 0.1em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.1em);
  transition: background-size 0.2s ease;
}
.header-nav-item--active a, .header-nav-item a:hover,
.header-menu-nav-item--active a, .header-menu-nav-item a:hover { background-size: 100% 1px; }

.header-burger {
  display: none;
  position: absolute;
  right: var(--sqs-mobile-site-gutter);
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--black);
  cursor: pointer;
}
.burger-box { position: relative; display: block; width: 35px; height: 35px; }
.top-bun, .bottom-bun {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 250ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
.top-bun { transform: translateY(-5.5px); }
.bottom-bun { transform: translateY(5.5px); }
.header--menu-open .top-bun { transform: rotate(-45deg); }
.header--menu-open .bottom-bun { transform: rotate(45deg); }

.header-menu {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20vh var(--sqs-mobile-site-gutter) 10vh;
  background-color: var(--lightAccent);
  opacity: 0;
  visibility: hidden;
  transition: visibility 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.header--menu-open .header-menu { opacity: 1; visibility: visible; }
.header-menu-nav-item { margin: 0.4em 0; line-height: 1; }
.header-menu-nav-item a {
  display: inline-block;
  font-size: 6vmin;
  font-family: var(--body-font);
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .header-inner { padding: 6vw var(--sqs-mobile-site-gutter); }
  .header-title { flex: 1 1 auto; min-width: 0; margin-right: 0; padding-left: 35px; text-align: center; }
  #site-title {
    --v: 6;
    font-family: var(--heading-font);
    line-height: 1.2em;
    font-size: min(calc((var(--v) - 1) * 0.012 * min(100vh, 900px) + 1rem), 12vw);
  }
  .header-nav { display: none; }
  .header-burger { display: block; position: static; transform: none; flex: 0 0 35px; z-index: 2; }
}

/* ---------- sections ---------- */

.page-section {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--siteBackgroundColor);
  color: var(--paragraphColor);
}
.page-section .content-wrapper { width: 100%; }
.page-section .content { width: 100%; }
.section-height--small { min-height: 33vh; }
.section-height--medium { min-height: 66vh; }
.section-height--large { min-height: 100vh; }
.section-height--small > .content-wrapper { padding-top: 3.3vmax; padding-bottom: 3.3vmax; }
.section-height--medium > .content-wrapper { padding-top: 6.6vmax; padding-bottom: 6.6vmax; }
.section-height--large > .content-wrapper { padding-top: 10vmax; padding-bottom: 10vmax; }

/* Section dividers: the section's bottom band is masked to a shape and the
   next section is pulled up underneath so its background shows through. */
.has-section-divider {
  padding-bottom: var(--divider-height);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--divider-height) + 1px) no-repeat,
                var(--divider-mask) bottom / 100% var(--divider-height) no-repeat;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--divider-height) + 1px) no-repeat,
        var(--divider-mask) bottom / 100% var(--divider-height) no-repeat;
}
.after-divider {
  margin-top: calc(-1 * var(--prev-divider-height));
  padding-top: var(--prev-divider-height);
}
.section-divider-stroke {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--divider-height);
  color: var(--paragraphColor);
  pointer-events: none;
  overflow: visible;
}

/* ---------- fluid grid blocks ---------- */

.fluid-engine { width: 100%; }
.fe-block { position: relative; min-width: 0; min-height: 0; }
.sqs-block {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.sqs-block-content { flex: var(--sqs-block-content-flex, 0 0 auto); min-height: 0; width: 100%; }
.sqs-block-alignment-wrapper { display: flex; width: 100%; height: 100%; }

.html-block .sqs-html-content { padding: var(--tweak-text-block-padding, 0); }
.html-block.sqs-background-enabled { background-color: var(--tweak-text-block-background-color, var(--textBlockBg)); height: 100%; }
.sqs-html-content > :first-child { margin-top: 0; }
.sqs-html-content > :last-child { margin-bottom: 0; }

.image-block .sqs-block-content { flex: 1 1 auto; height: 100%; }
.fluid-image-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.fluid-image-container a { display: block; width: 100%; height: 100%; }
.fluid-image-container img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--image-component-object-fit, cover);
  object-position: var(--image-component-focal-point, 50% 50%);
}
.fluid-image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--image-component-overlay-opacity, 0);
  mix-blend-mode: var(--image-component-overlay-blend-mode, normal);
  pointer-events: none;
}

/* ---------- buttons ---------- */

.sqs-block-button-container { display: flex; width: 100%; height: 100%; align-items: center; }
.sqs-block-button-container--left { justify-content: flex-start; }
.sqs-block-button-container--center { justify-content: center; }
.sqs-block-button-container--right { justify-content: flex-end; }
.sqs-block-button-element {
  --v: 1;
  display: inline-block;
  padding: 1.2rem 1.2rem;
  border: 0;
  font-family: var(--body-font);
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.sqs-block-button-element:hover { opacity: 0.85; }
.sqs-block-button-element--small { padding: 0.8rem 1rem; }
.sqs-block-button-element--large { padding: 1.6rem 2rem; }
.sqs-button-element--primary { background-color: var(--primaryButtonBg); color: var(--primaryButtonText); }
.sqs-button-element--tertiary {
  --v: 0.9;
  font-weight: 300;
  background-color: var(--tertiaryButtonBg);
  color: var(--tertiaryButtonText);
}
.sqs-stretched .sqs-block-button-element {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ---------- forms ---------- */

.form-block .sqs-block-content { flex: 1 1 auto; }
.form-wrapper .field-list { line-height: normal; }
.form-wrapper fieldset, .form-wrapper legend { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-wrapper .field { position: relative; margin: 0 0 24px; }
.form-wrapper .title { --v: 1; display: block; line-height: 1.5em; color: var(--paragraphColor); }
.form-wrapper .caption { --v: 0.9; display: block; line-height: 1.5em; color: var(--paragraphColor); }
.form-wrapper .required { font-size: 0.75em; opacity: 0.7; margin-left: 0.5em; }
.form-wrapper .fields { display: flex; gap: 2%; }
.form-wrapper .fields .field { flex: 1 1 0; margin-bottom: 0; }
.form-wrapper .fields.name { margin-top: 0.25em; }
.field-element {
  --v: 1;
  display: block;
  width: 100%;
  margin: 6px 0 4px;
  padding: 12px;
  border: 1px solid hsla(0, 0%, 0%, 1);
  border-radius: 2px;
  background: hsla(0, 0%, 98%, 1);
  color: #000;
  font-family: var(--body-font);
  line-height: normal;
}
.field-element:focus { background: #fff; outline: 2px solid var(--accent); outline-offset: 0; }
textarea.field-element { min-height: 100px; resize: vertical; }
.select-wrapper { position: relative; }
select.field-element {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5em;
  color: #000;
  cursor: pointer;
}
select.field-element:invalid { color: #777; }
.select-wrapper::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  pointer-events: none;
}
.form-button-wrapper { margin-top: 0.5rem; }
.form-button-wrapper--align-left { text-align: left; }
.form-button-wrapper--align-center { text-align: center; }
.form-button-wrapper--align-right { text-align: right; }
.form-button-wrapper .sqs-block-button-element { padding: 1.2rem 1.2rem; }

/* ---------- footer ---------- */

.social-icons { display: flex; justify-content: center; align-items: center; gap: 10px; }
.social-icon { display: inline-flex; color: var(--black); }
.social-icon svg { width: 14px; height: 14px; fill: currentColor; }
.social-icon:hover { opacity: 0.7; }

/* ---------- store ---------- */

.product-list-section .content-wrapper, .product-detail-section .content-wrapper {
  padding: 3vw var(--pagePadding) 6vw;
}
.product-list-title { --v: 3.5; margin: 0 0 1.5vw; text-align: center; font-weight: 400; }
.product-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2vw; }
.product-list-item { display: block; color: inherit; text-decoration: none; }
.product-list-item-image img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.product-list-item-meta { padding-top: 0.75em; }
.product-list-item-title { --v: 1.6; line-height: 1.3; }
.product-list-item-price { --v: 0.9; margin-top: 0.25em; }

.product-nav { --v: 0.9; margin-bottom: 1.5vw; }
.product-nav a { color: inherit; text-decoration: none; }
.product-nav-breadcrumb-divider { margin: 0 0.5em; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; align-items: start; }
.product-gallery img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 80% 50%; }
.product-title { --v: 4; margin: 0; line-height: 1.1; }
.product-price { --v: 1.5; margin: 0.5rem 0 1rem; }
.product-description p { margin: 1rem 0; }
.product-purchase { display: flex; gap: 0.75vw; margin-top: 1.5rem; }
.product-quantity { display: flex; align-items: stretch; border: 1px solid var(--black); background: var(--lightAccent); }
.product-quantity button {
  width: 2.75em;
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--black);
  cursor: pointer;
}
.product-quantity-input {
  width: 3em;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--body-font);
  font-size: 0.9rem;
  -moz-appearance: textfield;
}
.product-quantity-input::-webkit-outer-spin-button,
.product-quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-add-to-cart {
  --v: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 1.2em;
  font-family: var(--body-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .product-list { grid-template-columns: 1fr; gap: 6vw; }
  .product-detail { grid-template-columns: 1fr; gap: 6vw; }
  .product-list-section .content-wrapper, .product-detail-section .content-wrapper {
    padding: 6vw var(--sqs-mobile-site-gutter) 10vw;
  }
}