/*
Theme Name: Sylkmerie
Theme URI: https://sylkmerie.com
Description: A quiet, bilingual portfolio and pattern site for Sylkmerie. Child theme of Twenty Twenty-Five.
Author: Sylkmerie
Version: 1.1.0
Template: twentytwentyfive
Text Domain: sylkmerie
Requires at least: 6.6
Requires PHP: 7.4
*/

:root {
  --sylk-charcoal: #3d3932;
  --sylk-gold: #b5a184;
  --sylk-cream: #f7f4ee;
  --sylk-stone: #ddd6cb;
  --sylk-ink: #2d2a26;
  --sylk-white: #fffdfa;
}

html { scroll-behavior: smooth; }
body { background: var(--sylk-white); color: var(--sylk-ink); }
a { text-underline-offset: .18em; }

.sylk-header {
  border-bottom: 1px solid rgba(61,57,50,.10);
  background: rgba(255,253,250,.96);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 20;
}
.sylk-header-inner { min-height: 86px; }
.sylk-header .wp-block-site-logo img { height: auto; }
.sylk-header .wp-block-navigation-item__content { text-decoration: none; }
.sylk-header .wp-block-navigation-item__content:hover { color: var(--sylk-gold); }
.sylk-lang-link { opacity: .7; font-size: .9rem; letter-spacing: .08em; }

.sylk-hero { padding-top: clamp(4rem, 8vw, 8rem); padding-bottom: clamp(4rem, 8vw, 8rem); }
.sylk-eyebrow {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sylk-gold);
  font-weight: 600;
}
.sylk-display { max-width: 14ch; }
.sylk-lead { max-width: 58ch; font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.65; }
.sylk-section { padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
.sylk-section-soft { background: var(--sylk-cream); }
.sylk-section-dark { background: var(--sylk-charcoal); color: #fffdfa; }
.sylk-section-dark a { color: #fffdfa; }
.sylk-section-dark .wp-block-button .has-charcoal-color { color: var(--sylk-charcoal) !important; }
.sylk-section-title { max-width: 16ch; }
.sylk-small { font-size: .92rem; line-height: 1.65; }
.sylk-muted { color: #746d64; }

.sylk-placeholder img,
.sylk-card-image img,
.sylk-feature-image img {
  width: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.sylk-placeholder img { aspect-ratio: 4 / 5; }
.sylk-hero-image img { aspect-ratio: 4 / 5; }
.sylk-card-image img { aspect-ratio: 4 / 5; }
.sylk-wide-image img { aspect-ratio: 4 / 3; }

.sylk-card {
  height: 100%;
  border-top: 1px solid var(--sylk-stone);
  padding-top: 1.15rem;
}
.sylk-card h3 { margin-top: .55rem; }
.sylk-card .wp-block-buttons { margin-top: 1.2rem; }

.wp-block-button__link {
  transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}
.wp-block-button__link:hover { transform: translateY(-1px); opacity: .88; }
.wp-block-button.is-style-outline > .wp-block-button__link { border-width: 1px; }

.sylk-footer {
  border-top: 1px solid rgba(61,57,50,.12);
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.sylk-footer-links a { text-decoration: none; }
.sylk-footer-links a:hover { color: var(--sylk-gold); }

.sylk-prose { max-width: 720px; }
.sylk-prose p { line-height: 1.8; }
.sylk-contact-box { border: 1px solid var(--sylk-stone); padding: clamp(1.6rem, 4vw, 3rem); }

@media (max-width: 781px) {
  .sylk-header-inner { min-height: 72px; }
  .sylk-header .wp-block-site-logo img { max-width: 150px; }
  .sylk-hero { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}