/* =============================================================
   HeySilkySkin Theme — blog, single post, archives, search
   ============================================================= */

.hss-blog,
.hss-article,
.hss-search { background: #fff; }

/* =============================================================
   Shared page header band
   ============================================================= */
.hss-pagehead {
  background: var(--color-surface-canvas);
  border-bottom: 1px solid var(--color-hairline-violet);
  padding-block: clamp(36px, 5vw, 56px);
  text-align: center;
}
.hss-pagehead--narrow { max-width: 780px; }

.hss-pagehead__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-pink);
}
.hss-pagehead__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-ink-deep);
}
.hss-pagehead__lede {
  max-width: 520px;
  margin: 14px auto 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-on-dark-muted);
}

/* =============================================================
   Post cards
   ============================================================= */
.hss-blog__body { padding-block: 48px clamp(56px, 8vw, 88px); }

.hss-postgrid {
  display: grid;
  /* auto-fit rather than a fixed 3: it collapses empty trailing tracks, so the
     two cards left after the hero fill the width instead of sitting lopsided
     against an empty third column. Multi-row grids are unaffected, since their
     tracks are never wholly empty. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px 24px;
}

/*
 * Cards are surfaces, not floating text. Equal heights come from stretching the
 * link and pushing the meta row down, so a two-line title and a four-line one
 * still line their footers up.
 */
.hss-postcard {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--color-hairline-violet);
  border-radius: var(--radius-xxl);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid) ease;
}
.hss-postcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -14px rgba(44, 36, 34, 0.24);
}

.hss-postcard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.hss-postcard__link:hover { color: inherit; }

.hss-postcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-surface-announce);
}
.hss-postcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.hss-postcard:hover .hss-postcard__media img { transform: scale(1.04); }

.hss-postcard__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-deep);
}

.hss-postcard__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.hss-postcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-ink-deep);
  transition: color var(--dur-fast) ease;
}
.hss-postcard:hover .hss-postcard__title { color: var(--color-accent-violet); }

.hss-postcard__excerpt {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-on-dark-muted);
}

/* Pushed to the bottom so every card's footer aligns. */
.hss-postcard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: rgba(44, 36, 34, 0.5);
}
.hss-postcard__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.hss-postcard__read { font-family: inherit; font-size: inherit; color: inherit; }

.hss-postcard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-hairline-violet);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-accent-violet);
}
.hss-postcard__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.hss-postcard:hover .hss-postcard__arrow { transform: translateX(4px); }

/* =============================================================
   Featured post
   ============================================================= */
.hss-feature-post {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-hairline-cloud);
}
.hss-feature-post__media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xxl);
  overflow: hidden;
  background: var(--color-surface-announce);
}
.hss-feature-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.hss-feature-post:hover .hss-feature-post__media img { transform: scale(1.03); }

.hss-feature-post__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.hss-feature-post__title a { color: var(--color-ink-deep); }
.hss-feature-post__title a:hover { color: var(--color-accent-violet); }

.hss-feature-post__excerpt {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(44, 36, 34, 0.65);
}
.hss-feature-post__cta { pointer-events: none; }

/* =============================================================
   Single post
   ============================================================= */
.hss-pagehead--post { padding-bottom: clamp(40px, 5vw, 48px); }

.hss-article__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-on-dark-muted);
}

.hss-article__wrap { max-width: 780px; }

.hss-article__hero {
  aspect-ratio: 16 / 9;
  margin: -28px 0 40px;
  border-radius: var(--radius-xxl);
  overflow: hidden;
  box-shadow: var(--elevation-2);
  background: var(--color-surface-announce);
}
.hss-article__hero img { width: 100%; height: 100%; object-fit: cover; }

/* Long-form typography: generous measure and leading. */
.hss-article__body {
  font-family: var(--font-ui);
  font-size: 17.5px;
  line-height: 1.95;
  color: var(--color-ink);
}
.hss-article__body > * + * { margin-top: 1.3em; }
.hss-article__body p { margin: 0; }

.hss-article__body h2 {
  margin-top: 2em;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-ink-deep);
}
.hss-article__body h3 {
  margin-top: 1.8em;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 600;
  color: var(--color-ink-deep);
}

.hss-article__body ul,
.hss-article__body ol { padding-left: 22px; }
.hss-article__body li { margin-bottom: 8px; }

.hss-article__body a {
  color: var(--color-accent-violet);
  text-decoration: underline;
}
.hss-article__body a:hover { color: var(--color-accent-violet-deep); }

.hss-article__body img,
.hss-article__body figure img {
  border-radius: var(--radius-xl);
  height: auto;
}
.hss-article__body figure { margin: 0; }
.hss-article__body figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--color-on-dark-muted);
  text-align: center;
}

.hss-article__body blockquote {
  margin: 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--color-accent-pink);
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-ink-deep);
}

.hss-article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.hss-article__body th,
.hss-article__body td {
  padding: 10px 12px;
  border: 1px solid var(--color-hairline-violet);
  text-align: left;
}

/* =============================================================
   In-article product CTA
   ============================================================= */
.hss-articlecta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 48px 0;
  padding: 24px 28px;
  background: var(--color-surface-canvas);
  border: 1px solid var(--color-hairline-violet);
  border-radius: var(--radius-xxl);
}
.hss-articlecta__product { display: flex; align-items: center; gap: 16px; }
.hss-articlecta__media {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fdeef1;
}
.hss-articlecta__media img { width: 100%; height: 100%; object-fit: cover; }
.hss-articlecta__meta { display: flex; flex-direction: column; }
.hss-articlecta__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-ink-deep);
}
.hss-articlecta__price {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-on-dark-muted);
}

/* =============================================================
   Related + comments
   ============================================================= */
.hss-related-posts {
  padding-block: clamp(48px, 7vw, 72px);
  background: var(--color-surface-canvas);
  border-top: 1px solid var(--color-hairline-violet);
}
.hss-article__comments { max-width: 780px; padding-block: 48px; }

/* =============================================================
   Search
   ============================================================= */
.hss-search__form { max-width: 520px; margin: 22px auto 0; }
.hss-search .hss-search { display: flex; gap: 10px; }
.hss-search .hss-search__input {
  flex: 1 1 auto;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--color-hairline-cool);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
}

.hss-search__body { padding-block: 48px clamp(56px, 8vw, 88px); }
.hss-search__group + .hss-search__group { margin-top: 56px; }
.hss-search__grouptitle {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink-deep);
}
.hss-search__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.hss-search__empty,
.hss-blog__empty {
  padding: 72px 20px;
  text-align: center;
  border: 1px dashed var(--color-hairline-cool);
  border-radius: var(--radius-xl);
}
.hss-blog__emptytitle {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--color-ink-deep);
}
.hss-blog__emptytext {
  margin: 0 0 22px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: rgba(44, 36, 34, 0.6);
}

/* =============================================================
   Pagination
   ============================================================= */
.hss-blog .navigation.pagination,
.hss-search .navigation.pagination { margin-top: 48px; }
.hss-blog .nav-links,
.hss-search .nav-links {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hss-blog .page-numbers,
.hss-search .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-hairline-violet);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-ink-deep);
}
.hss-blog .page-numbers:hover,
.hss-search .page-numbers:hover { background: var(--color-ink-deep); color: #fff; }
.hss-blog .page-numbers.current,
.hss-search .page-numbers.current {
  background: var(--color-ink-deep);
  border-color: var(--color-ink-deep);
  color: #fff;
}
.hss-blog .screen-reader-text { display: none; }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 960px) {
  .hss-postgrid,
  .hss-search__products { grid-template-columns: repeat(2, 1fr); }
  .hss-feature-post { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .hss-postgrid,
  .hss-search__products { grid-template-columns: 1fr; }
  .hss-article__hero { margin-top: -16px; }
  .hss-articlecta { flex-direction: column; align-items: stretch; }
  .hss-articlecta .hss-btn { justify-content: center; }
  .hss-search .hss-search { flex-direction: column; }
}

/* =============================================================
   Comments

   WordPress renders the comment textarea with a cols attribute,
   which sizes it in character widths and ignores its container —
   that alone pushed the page into horizontal scroll at 375px.
   ============================================================= */
.hss-article__comments input[type="text"],
.hss-article__comments input[type="email"],
.hss-article__comments input[type="url"],
.hss-article__comments textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--color-hairline-cool);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-ink-deep);
}
.hss-article__comments textarea { min-height: 140px; resize: vertical; }
.hss-article__comments input:focus,
.hss-article__comments textarea:focus { outline: none; box-shadow: var(--shadow-input-focus); }

.hss-article__comments .comment-reply-title,
.hss-article__comments .comments-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink-deep);
}

.hss-article__comments .comment-form p { margin: 0 0 16px; }
.hss-article__comments .comment-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-deep);
}
.hss-article__comments .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
}
.hss-article__comments .comment-form-cookies-consent input { width: auto; min-height: 0; }
.hss-article__comments .comment-form-cookies-consent label { margin: 0; font-weight: 400; }

.hss-article__comments .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.hss-article__comments .submit:hover { background: var(--color-ink-press); transform: translateY(-2px); }

.hss-article__comments .comment-list { list-style: none; margin: 0 0 40px; padding: 0; }
.hss-article__comments .comment-list li { margin-bottom: 20px; }
.hss-article__comments .comment-body {
  padding: 20px;
  background: var(--color-surface-canvas);
  border-radius: var(--radius-xl);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.7;
}
.hss-article__comments .comment-author { font-weight: 600; color: var(--color-ink-deep); }
.hss-article__comments .comment-metadata { font-size: 13px; color: var(--color-on-dark-muted); }