/* ============================================================
   Vita Dolya — A quiet archive
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

/* === TOKENS === */
:root {
  --parchment:   #f5f1ea;
  --cream:       #edeae0;
  --paper:       #e4dfd4;
  --stone:       #cec7b8;
  --clay:        #7d6040;
  --clay-dim:    rgba(125, 96, 64, 0.2);
  --ink:         #151210;
  --text:        #2a2218;
  --mid:         #524438;
  --muted:       #8a7a6a;
  --border:      rgba(125, 96, 64, 0.18);
  --border-soft: rgba(125, 96, 64, 0.10);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;

  --max-w:     1280px;
  --col-text:  640px;
  --gap:       clamp(3rem, 6vw, 6rem);
  --trans:     0.35s ease;
}

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

/* === BODY — flex column for DOM-order reflow === */
body {
  background:      var(--parchment) !important;
  color:           var(--text) !important;
  font-family:     var(--sans) !important;
  font-weight:     300 !important;
  font-size:       1.0625rem !important;
  line-height:     1.75 !important;
  -webkit-font-smoothing: antialiased !important;
  display:         flex !important;
  flex-direction:  column !important;
  min-height:      100vh !important;
}

/* Ensure all direct children stay full-width */
body > * {
  width:     100% !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
}

/* Visual order: header first, then hero, then content, footer last */
body > .skip-link         { order: -1; }
body > #site-header       { order:  0; }
body > .vd-hero           { order:  1; }
body > .vd-works-header   { order:  2; }
body > #content,
body > .wp-site-blocks    { order:  3; flex-grow: 1 !important; }
body > .vd-about          { order:  4; }
body > .vd-archive-note   { order:  5; }
body > .vd-contact        { order:  6; }
body > #site-footer       { order:  7; margin-top: auto !important; }

/* Paper grain — desktop only */
@media (hover: hover) {
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
  }
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--parchment); }
::-webkit-scrollbar-thumb { background: var(--stone); }

/* === UTILITY === */
.vd-label {
  font-family: var(--sans) !important;
  font-size:   0.74rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 0 0 1.5rem !important;
}

/* ============================================================
   HEADER
   ============================================================ */
#site-header {
  position:      sticky !important;
  top:           0 !important;
  z-index:       100 !important;
  background:    var(--parchment) !important;
  border-bottom: 1px solid var(--border) !important;
}

.header-inner {
  max-width: var(--max-w) !important;
  margin:    0 auto !important;
  padding:   0 2.5rem !important;
  height:    58px !important;
  display:   flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Logo */
.site-branding { margin-left: 1rem !important; }

.site-logo img {
  height:    36px !important;
  width:     auto !important;
  max-width: none !important;
  filter:    none !important;
  opacity:   0.9 !important;
  display:   block !important;
}

/* Nav */
.site-navigation .menu {
  display:     flex !important;
  gap:         0 !important;
  list-style:  none !important;
  margin:      0 !important;
  padding:     0 !important;
  flex-wrap:   wrap !important;
}

.site-navigation .menu a {
  display:         block !important;
  padding:         0.4rem 0.85rem !important;
  font-family:     var(--sans) !important;
  font-size:       0.86rem !important;
  font-weight:     500 !important;
  letter-spacing:  0.06em !important;
  color:           var(--text) !important;
  text-decoration: none !important;
  transition:      color var(--trans) !important;
  white-space:     nowrap !important;
}

.site-navigation .menu a:hover {
  color: var(--clay) !important;
}

.site-navigation-toggle-holder button {
  color:      var(--text) !important;
  background: none !important;
  border:     none !important;
}

/* ============================================================
   HERO
   ============================================================ */
.vd-hero {
  min-height: 94vh;
  display:    flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding:    clamp(4rem, 10vw, 8rem) clamp(1.5rem, 6vw, 5rem);
  max-width:  var(--max-w);
  margin:     0 auto;
  position:   relative;
}

.vd-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: clamp(1.5rem, 6vw, 5rem);
  right: clamp(1.5rem, 6vw, 5rem);
  height: 1px;
  background: var(--border);
}

.vd-hero__name {
  font-family:    var(--sans) !important;
  font-size:      0.78rem !important;
  font-weight:    500 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color:          var(--mid) !important;
  margin:         0 0 3rem !important;
}

.vd-hero__statement {
  font-family:  var(--serif) !important;
  font-size:    clamp(2.8rem, 6.5vw, 5.5rem) !important;
  font-weight:  300 !important;
  line-height:  1.12 !important;
  letter-spacing: -0.01em !important;
  color:        var(--ink) !important;
  margin:       0 0 3rem !important;
  max-width:    700px !important;
  font-style:   italic !important;
}

.vd-hero__materials {
  font-family:    var(--sans) !important;
  font-size:      0.9rem !important;
  font-weight:    400 !important;
  letter-spacing: 0.12em !important;
  color:          var(--mid) !important;
  margin:         0 0 5rem !important;
}

.vd-hero__place {
  font-family:    var(--sans) !important;
  font-size:      0.78rem !important;
  font-weight:    400 !important;
  letter-spacing: 0.15em !important;
  color:          var(--mid) !important;
  margin:         0 !important;
}

.vd-hero__scroll {
  position:   absolute;
  bottom:     2.5rem;
  right:      clamp(1.5rem, 6vw, 5rem);
  font-size:  1.2rem;
  color:      var(--stone);
  animation:  vd-float 3s ease-in-out infinite;
  line-height: 1;
  cursor:     pointer;
  user-select: none;
  transition: color var(--trans);
}

.vd-hero__scroll:hover {
  color: var(--clay);
}

@keyframes vd-float {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   WORKS HEADER
   ============================================================ */
.vd-works-header {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   var(--gap) clamp(1.5rem, 6vw, 5rem) 2.5rem;
  display:   flex;
  flex-direction: column;
  gap:       0.75rem;
}

.vd-works-header__note {
  font-family: var(--serif) !important;
  font-size:   1.15rem !important;
  font-style:  italic !important;
  font-weight: 300 !important;
  color:       var(--mid) !important;
  margin:      0 !important;
}

/* ============================================================
   MAIN CONTENT WRAPPER
   ============================================================ */
#content { background: var(--parchment) !important; }

.page-header { display: none !important; }

.page-content,
.entry-content {
  max-width: var(--max-w) !important;
  margin:    0 auto !important;
  padding:   0 clamp(1.5rem, 6vw, 5rem) var(--gap) !important;
}

.entry-content > .vd-page-intro:first-child {
  padding-top: clamp(4rem, 8vw, 7rem);
}

.vd-page-intro {
  max-width: 760px;
  margin: 0 0 clamp(3rem, 6vw, 5rem);
}

.vd-page-intro h1,
.vd-page-intro h2 {
  font-family: var(--serif) !important;
  font-size: clamp(2.6rem, 5vw, 4.8rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.08 !important;
  margin: 0 0 1.5rem !important;
}

.vd-page-intro p {
  font-size: 1.08rem !important;
  max-width: 660px;
  margin: 0 0 1rem !important;
}

.vd-state-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  margin: clamp(3rem, 6vw, 5rem) 0;
}

.vd-state {
  background: var(--parchment);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 220px;
}

.vd-state h2,
.vd-state h3 {
  font-family: var(--serif) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  margin: 0 0 1rem !important;
}

.vd-state p {
  font-size: 0.95rem !important;
  margin: 0 0 1.25rem !important;
}

.vd-quiet-list {
  list-style: none !important;
  margin: 2rem 0 0 !important;
  padding: 0 !important;
  max-width: 760px;
  border-top: 1px solid var(--border-soft);
}

.vd-quiet-list li {
  border-bottom: 1px solid var(--border-soft);
  padding: 1rem 0;
  color: var(--mid);
}

/* ============================================================
   WOOCOMMERCE — PRODUCT GRID
   ============================================================ */
.woocommerce .products,
.woocommerce-page .products {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   2px !important;
  list-style:            none !important;
  padding:               0 !important;
  margin:                0 !important;
  background:            var(--paper) !important;
}

/* WooCommerce clearfix ::before/::after become ghost grid items — suppress them */
.woocommerce .products::before,
.woocommerce .products::after,
.woocommerce-page .products::before,
.woocommerce-page .products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product {
  background:  var(--parchment) !important;
  margin:      0 !important;
  padding:     0 !important;
  float:       none !important;
  width:       100% !important;
  position:    relative !important;
  transition:  background var(--trans) !important;
}

.woocommerce ul.products li.product:hover {
  background: var(--cream) !important;
}

/* Image */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  display:         block !important;
  text-decoration: none !important;
  overflow:        hidden !important;
}

.woocommerce ul.products li.product img {
  width:       100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit:  cover !important;
  display:     block !important;
  margin:      0 !important;
  transition:  transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
               filter 0.6s ease !important;
  filter:      saturate(0.85) !important;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.04) !important;
  filter:    saturate(1) !important;
}

/* Product info */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family:     var(--serif) !important;
  font-size:       1.1rem !important;
  font-weight:     400 !important;
  font-style:      italic !important;
  letter-spacing:  0.01em !important;
  color:           var(--ink) !important;
  padding:         1.25rem 1.5rem 0.3rem !important;
  margin:          0 !important;
  line-height:     1.3 !important;
}

.woocommerce ul.products li.product .price {
  font-family: var(--sans) !important;
  font-size:   0.86rem !important;
  font-weight: 400 !important;
  color:       var(--mid) !important;
  padding:     0 1.5rem 0.75rem !important;
  display:     block !important;
  letter-spacing: 0.06em !important;
}

.woocommerce ul.products li.product .price:empty {
  display: none !important;
}

.woocommerce ul.products li.product .price del {
  color:   var(--muted) !important;
  opacity: 0.6 !important;
}

/* Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display:         block !important;
  margin:          0 1.5rem 1.5rem !important;
  width:           calc(100% - 3rem) !important;
  background:      transparent !important;
  border:          1px solid var(--border) !important;
  color:           var(--mid) !important;
  font-family:     var(--sans) !important;
  font-size:       0.76rem !important;
  font-weight:     500 !important;
  letter-spacing:  0.18em !important;
  text-transform:  uppercase !important;
  padding:         0.7rem 1rem !important;
  border-radius:   0 !important;
  text-align:      center !important;
  text-decoration: none !important;
  transition:      all 0.25s ease !important;
}

.woocommerce ul.products li.product .button:hover {
  border-color: var(--clay) !important;
  color:        var(--clay) !important;
  background:   transparent !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background:     var(--clay) !important;
  color:          var(--parchment) !important;
  font-family:    var(--sans) !important;
  font-size:      0.58rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight:    500 !important;
  border-radius:  0 !important;
  top:            1rem !important;
  left:           1rem !important;
  right:          auto !important;
  min-height:     unset !important;
  min-width:      unset !important;
  padding:        0.3rem 0.65rem !important;
  line-height:    1.2 !important;
}

/* ============================================================
   SHOP / ARCHIVE PAGE
   ============================================================ */
.woocommerce-page .woocommerce-ordering select {
  background:  var(--cream) !important;
  color:       var(--text) !important;
  border:      1px solid var(--border) !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-size:   0.78rem !important;
  padding:     0.5rem 1rem !important;
}

.woocommerce-result-count,
.woocommerce-breadcrumb {
  font-family: var(--sans) !important;
  font-size:   0.86rem !important;
  color:       var(--muted) !important;
  letter-spacing: 0.04em !important;
}

.woocommerce-breadcrumb a { color: var(--mid) !important; }
.woocommerce-breadcrumb a:hover { color: var(--ink) !important; }

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.woocommerce div.product .product_title {
  font-family:    var(--serif) !important;
  font-size:      2.2rem !important;
  font-weight:    400 !important;
  font-style:     italic !important;
  color:          var(--ink) !important;
  letter-spacing: -0.01em !important;
  line-height:    1.2 !important;
}

.woocommerce div.product .price {
  font-family: var(--sans) !important;
  font-size:   1rem !important;
  color:       var(--mid) !important;
  font-weight: 400 !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--sans) !important;
  font-size:   0.9rem !important;
  color:       var(--mid) !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
}

.vd-work-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--paper);
  margin: 0 0 2rem;
}

.vd-work-gallery__item {
  margin: 0;
  background: var(--parchment);
  overflow: hidden;
}

.vd-work-gallery__item--cover {
  grid-column: 1 / -1;
}

.vd-work-gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  filter: saturate(0.9);
}

.vd-work-gallery__item--cover img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--cream);
}

.vd-single-work {
  position: relative;
  z-index: 2;
  background: var(--parchment);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5rem);
}

.vd-single-work__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.62fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.vd-single-work__text {
  position: sticky;
  top: 6rem;
  padding-top: 0.5rem;
}

.vd-single-work__text h1 {
  font-family: var(--serif) !important;
  font-size: clamp(2.4rem, 4vw, 4.4rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.08 !important;
  margin: 0 0 1.25rem !important;
}

.vd-single-work__price {
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: var(--clay) !important;
  margin: 0 0 1.5rem !important;
}

.vd-single-work__excerpt,
.vd-single-work__story {
  border-top: 1px solid var(--border-soft);
  padding-top: 1.35rem;
  margin-top: 1.35rem;
}

.vd-single-work__excerpt p,
.vd-single-work__story p {
  font-size: 0.96rem !important;
  color: var(--mid) !important;
  margin: 0 0 1rem !important;
}

.vd-single-work .vd-link-quiet {
  display: inline-block;
  margin-top: 1.25rem;
}

.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background:     transparent !important;
  color:          var(--clay) !important;
  border:         1px solid var(--clay) !important;
  border-radius:  0 !important;
  font-family:    var(--sans) !important;
  font-size:      0.7rem !important;
  font-weight:    500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding:        1rem 2.5rem !important;
  transition:     all 0.25s ease !important;
}

.woocommerce div.product form.cart .button:hover {
  background: var(--clay) !important;
  color:      var(--parchment) !important;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.vd-about {
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: var(--gap);
}

.vd-about__inner {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   var(--gap) clamp(1.5rem, 6vw, 5rem);
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       clamp(3rem, 6vw, 7rem);
}

.vd-about__text p,
.vd-about__nav p {
  font-family: var(--sans) !important;
  font-size:   1rem !important;
  line-height: 1.85 !important;
  color:       var(--mid) !important;
  font-weight: 300 !important;
  margin:      0 0 1.25rem !important;
}

.vd-about__text p em {
  font-family: var(--serif);
  font-size:   1.05rem;
  font-style:  italic;
  color:       var(--ink);
}

.vd-about__nav ul {
  list-style:  none !important;
  padding:     0 !important;
  margin:      0 0 2rem !important;
}

.vd-about__nav ul li {
  border-bottom: 1px solid var(--border-soft);
}

.vd-about__nav ul li a {
  display:     block !important;
  padding:     0.7rem 0 !important;
  font-family: var(--sans) !important;
  font-size:   0.94rem !important;
  font-weight: 300 !important;
  color:       var(--mid) !important;
  text-decoration: none !important;
  transition:  color var(--trans) !important;
  letter-spacing: 0.02em !important;
}

.vd-about__nav ul li a:hover {
  color: var(--ink) !important;
}

.vd-link-quiet {
  font-family:    var(--sans) !important;
  font-size:      0.82rem !important;
  font-weight:    500 !important;
  letter-spacing: 0.1em !important;
  color:          var(--clay) !important;
  text-decoration: none !important;
  border-bottom:  1px solid var(--clay-dim) !important;
  padding-bottom: 1px !important;
  transition:     border-color var(--trans) !important;
}

.vd-link-quiet:hover {
  border-color: var(--clay) !important;
  color:        var(--clay) !important;
}

/* ============================================================
   ARCHIVE NOTE
   ============================================================ */
.vd-archive-note {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   var(--gap) clamp(1.5rem, 6vw, 5rem);
}

.vd-archive-note__inner {
  max-width: var(--col-text);
}

.vd-archive-note p {
  font-family: var(--sans) !important;
  font-size:   1rem !important;
  color:       var(--muted) !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
  font-style:  italic !important;
  margin:      0 !important;
}

/* ============================================================
   CONTACT
   ============================================================ */
.vd-contact {
  background:    var(--paper);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.vd-contact__inner {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   var(--gap) clamp(1.5rem, 6vw, 5rem);
  max-width: 680px;
  margin:    0 auto;
}

.vd-contact p {
  font-family: var(--sans) !important;
  font-size:   1rem !important;
  color:       var(--mid) !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
  margin:      0 0 1rem !important;
}

.vd-contact__email {
  font-family:    var(--sans) !important;
  font-size:      0.94rem !important;
  font-weight:    400 !important;
  letter-spacing: 0.04em !important;
  color:          var(--clay) !important;
  text-decoration: none !important;
  border-bottom:  1px solid var(--clay-dim) !important;
  padding-bottom: 1px !important;
  transition:     border-color var(--trans) !important;
}

.vd-contact__email:hover {
  border-color: var(--clay) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: var(--cream) !important;
  border-top: 1px solid var(--border) !important;
}

.footer-inner {
  max-width: var(--max-w) !important;
  margin:    0 auto !important;
  padding:   1.75rem clamp(1.5rem, 6vw, 5rem) !important;
  display:   flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap:       1rem !important;
}

#site-footer .site-logo img {
  height:  26px !important;
  width:   auto !important;
  filter:  sepia(0.3) brightness(0.7) !important;
  opacity: 0.55 !important;
}

.copyright {
  font-family:    var(--sans) !important;
  font-size:      0.82rem !important;
  color:          var(--muted) !important;
  letter-spacing: 0.06em !important;
  font-weight:    400 !important;
}

/* ============================================================
   TYPOGRAPHY (GLOBAL)
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  color:       var(--ink) !important;
  line-height: 1.2 !important;
}

p {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  color:       var(--mid) !important;
  line-height: 1.75 !important;
}

a {
  color:      var(--text) !important;
  transition: color var(--trans) !important;
}

a:hover { color: var(--clay) !important; }

/* ============================================================
   ELEMENTOR OVERRIDES
   ============================================================ */
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner {
  color: var(--text) !important;
}

.elementor-widget-text-editor p {
  color: var(--mid) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .woocommerce .products,
  .woocommerce-page .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .vd-about__inner {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }

  .vd-single-work__inner {
    grid-template-columns: 1fr;
  }

  .vd-single-work__text {
    position: static;
  }
}

@media (max-width: 560px) {
  .woocommerce .products,
  .woocommerce-page .products {
    grid-template-columns: 1fr !important;
  }

  .vd-hero__statement {
    font-size: 2.6rem !important;
  }

  .header-inner { padding: 0 1.25rem !important; }

  .site-navigation .menu a {
    padding:    0.4rem 0.5rem !important;
    font-size:  0.74rem !important;
  }

  .vd-work-gallery {
    grid-template-columns: 1fr;
  }
}