/*
Theme Name:   FL Onyx Atelier
Theme URI:    https://www.flonyxatelier.com
Description:  Kadence 子主题，承载 FL Onyx Atelier 的视觉体系：缟玛瑙黑、象牙白、琥珀点缀。
Author:       FL Onyx Atelier
Template:     kadence
Version:      1.0.0
Text Domain:  flonyx
*/

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InstrumentSerif-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/InstrumentSans-latin.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  --onyx-900: #14110E;
  --onyx-800: #1C1814;
  --onyx-700: #2A241D;
  --ink: #1F1B17;
  --ink-muted: #6B625A;
  --ivory-100: #FBF8F2;
  --ivory-200: #F2ECE1;
  --stone-200: #E7DFD2;
  --stone-300: #DFD7CA;
  --amber: #D99A4E;
  --gold: #C9A24D;
  --gold-bright: #E8C078;
  --coffee-900: #3A2B21;
  --coffee-850: #43301F;
  --coffee-800: #4A382C;
  --coffee-700: #5A4536;
  --on-dark-muted: #D6C4B2;

  --font-display: 'Instrument Serif', 'Songti SC', Georgia, serif;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --fl-wrap: 1320px;
  --fl-measure: 700px;
}

/* ---------- base ---------- */
body.fl-body,
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--ivory-100);
  -webkit-font-smoothing: antialiased;
}

body.fl-body h1, body.fl-body h2, body.fl-body h3, body.fl-body h4,
.entry-content h1, .entry-content h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: inherit;
}

a { color: inherit; }

/* ---------- shared layout ---------- */
.fl-wrap {
  width: 100%;
  max-width: var(--fl-wrap);
  margin: 0 auto;
  padding: 0 32px;
}
.fl-section { padding: 96px 0; }
.fl-section--tight { padding: 56px 0; }

.fl-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--s3);
}

.fl-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: var(--fl-measure);
}

/* ---------- header ---------- */
.site-header-row,
#masthead .site-header-row-container-inner {
  background: var(--coffee-900) !important;
}
#masthead .site-title,
#masthead .site-title a,
#masthead a.brand,
#masthead a.brand .site-title {
  font-family: var(--font-display) !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  color: var(--gold) !important;
  text-decoration: none !important;
}
#masthead a.brand:hover .site-title { color: #E8C078 !important; }
#masthead .main-navigation .primary-menu-container > ul > li > a,
#masthead ul.menu > li > a {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gold) !important;
  text-transform: none;
}
#masthead ul.menu > li > a:hover { color: var(--gold-bright) !important; }

/* 下拉子菜单 */
#masthead .sub-menu,
#masthead .dropdown-menu {
  background: var(--coffee-800);
  border: 1px solid rgba(255,255,255,0.08);
}
#masthead .sub-menu li a { color: var(--ivory-200) !important; font-size: 13px; }
#masthead .sub-menu li a:hover { color: var(--gold-bright) !important; }

/* ---------- buttons ---------- */
.fl-btn,
body .wp-block-button__link,
body .kadence-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  background: var(--coffee-900);
  color: var(--ivory-100);
  border: 1px solid var(--coffee-900);
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
}
.fl-btn:hover,
body .wp-block-button__link:hover {
  background: transparent;
  color: var(--coffee-900);
}
.fl-btn--light {
  background: var(--ivory-100);
  color: var(--onyx-900);
  border-color: var(--ivory-100);
}
.fl-btn--light:hover { background: transparent; color: var(--ivory-100); }

/* ---------- hero ---------- */
.fl-hero {
  background: var(--coffee-850);
  color: var(--ivory-100);
  padding: 128px 0 112px;
}
.fl-hero h1 {
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.05;
  max-width: 18ch;
  margin: 0 0 var(--s5);
}
.fl-hero p {
  color: var(--on-dark-muted);
  font-size: 17px;
  line-height: 1.75;
  max-width: 52ch;
  margin: 0 0 var(--s7);
}
.fl-hero--page { padding: 96px 0 72px; }

/* ---------- series cards (home) ---------- */
.fl-series-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.fl-series-card {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  background: var(--coffee-800);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fl-series-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  padding: 34px;
  display: block;
  transition: transform 700ms ease;
}
.fl-series-card:hover img { transform: scale(1.04); }
.fl-series-card span {
  display: block;
  padding: 16px 12px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--ivory-100);
  background: var(--coffee-800);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- product grid ---------- */
.fl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
}
.fl-card { display: block; text-decoration: none; }
.fl-card-media {
  background: #fff;
  border: 1px solid var(--stone-200);
  overflow: hidden;
}
.fl-card-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  display: block;
  transition: transform 700ms ease;
}
.fl-card:hover .fl-card-media img { transform: scale(1.02); }
.fl-card-body { padding-top: var(--s4); }
.fl-card-model {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.fl-card-title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
}
.fl-card-meta { font-size: 13px; color: var(--ink-muted); margin: 0; }

/* ---------- single product ---------- */
.fl-product {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}
.fl-product-media {
  background: #fff;
  border: 1px solid var(--stone-200);
}
.fl-product-media img { width: 100%; height: auto; display: block; }
.fl-product h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  margin: 0 0 var(--s4);
}
.fl-spec {
  border-top: 1px solid var(--stone-300);
  margin: var(--s6) 0 var(--s7);
}
.fl-spec div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--stone-200);
}
.fl-spec dt, .fl-spec .fl-spec-k {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fl-spec dd, .fl-spec .fl-spec-v { margin: 0; font-size: 15px; }

/* ---------- related ---------- */
.fl-related {
  border-top: 1px solid var(--stone-300);
  margin-top: 96px;
  padding-top: 56px;
}
.fl-related h2 { font-size: 26px; margin: 0 0 var(--s6); }

/* ---------- pagination ---------- */
.fl-pager { margin-top: 64px; }
.fl-pager .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--stone-300);
  margin-right: 6px;
  text-decoration: none;
  font-size: 13px;
}
.fl-pager .current { background: var(--coffee-900); color: var(--ivory-100); border-color: var(--coffee-900); }

/* ---------- footer ---------- */
#colophon, .site-footer {
  background: var(--coffee-900);
  color: var(--on-dark-muted);
}
#colophon a, .site-footer a { color: var(--ivory-200); }
#colophon a:hover, .site-footer a:hover { color: var(--amber); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .fl-series-grid { grid-template-columns: repeat(3, 1fr); }
  .fl-grid { grid-template-columns: repeat(2, 1fr); }
  .fl-product { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .fl-wrap { padding: 0 20px; }
  .fl-section { padding: 64px 0; }
  .fl-hero { padding: 88px 0 72px; }
  .fl-series-grid { grid-template-columns: repeat(2, 1fr); }
  .fl-grid { grid-template-columns: 1fr; gap: 32px; }
  .fl-spec div { grid-template-columns: 110px 1fr; }
}




/* ---------- pages (About / Bespoke / Projects / Stone / Trade / Contact) ---------- */
body.page .entry-title { display: none; }

body.page .entry-content {
  padding: 88px 0 112px;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
body.page .entry-content > h1:first-child {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08;
  margin: 0 0 36px;
  max-width: 20ch;
}
body.page .entry-content h2 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  margin: 72px 0 18px;
}
body.page .entry-content h3 {
  font-size: 21px;
  margin: 44px 0 10px;
  letter-spacing: 0.01em;
}
body.page .entry-content p,
body.page .entry-content li {
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-muted);
}
body.page .entry-content strong { color: var(--ink); font-weight: 600; }
body.page .entry-content a { color: var(--coffee-700); border-bottom: 1px solid var(--stone-300); text-decoration: none; }
body.page .entry-content a:hover { color: var(--amber); border-color: var(--amber); }

body.page .wp-block-columns { gap: 48px; }
body.page .wp-block-columns .wp-block-image { margin: 0 0 16px; }
body.page .wp-block-columns img { width: 100%; height: auto; display: block; }
body.page .wp-block-list { padding-left: 20px; }
body.page .wp-block-list li { margin-bottom: 10px; }

@media (max-width: 720px) {
  body.page .entry-content { padding: 56px 20px 72px; }
  body.page .wp-block-columns { gap: 24px; }
}

/* ---------- inquiry form ---------- */
.fl-form-wrap { max-width: 760px; }
.fl-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
  margin-bottom: 32px;
}
.fl-form-grid label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fl-form-grid .fl-full { grid-column: 1 / -1; }
.fl-form-grid input[type="text"],
.fl-form-grid input[type="email"],
.fl-form-grid textarea {
  width: 100%;
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid var(--stone-300);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  border-radius: 0;
}
.fl-form-grid textarea { resize: vertical; min-height: 130px; }
.fl-form-grid input:focus,
.fl-form-grid textarea:focus {
  outline: none;
  border-color: var(--coffee-700);
}
.fl-form-grid input[type="file"] { margin-top: 12px; font-size: 13px; }
.req { color: var(--amber); }
.fl-hint { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.fl-hp { position: absolute; left: -9999px; height: 0; width: 1px; overflow: hidden; }
.fl-form-note { margin-top: 20px; font-size: 12px; color: var(--ink-muted); }
.fl-form-status {
  padding: 16px 18px;
  margin-bottom: 28px;
  font-size: 14px;
  border-left: 3px solid;
}
.fl-form-status--ok { background: #EDF2EC; border-color: #3E5C46; color: #2F4636; }
.fl-form-status--err { background: #F7EBE8; border-color: #9A3B2A; color: #7A2E20; }

@media (max-width: 720px) {
  .fl-form-grid { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.fl-footer {
  background: var(--coffee-900);
  color: var(--on-dark-muted);
  padding: 72px 0 0;
  margin-top: 0;
}
.fl-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}
.fl-footer-logo {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.10em;
  color: var(--gold);
  margin: 0 0 8px;
}
.fl-footer-slogan {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin: 0 0 20px;
}
.fl-footer-note {
  font-size: 13px;
  line-height: 1.7;
  max-width: 34ch;
  margin: 0;
  color: var(--on-dark-muted);
}
.fl-footer-h {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.fl-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fl-footer-list li {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: var(--on-dark-muted);
}
.fl-footer-list a {
  color: var(--ivory-200);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.fl-footer-list a:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}
.fl-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  color: var(--on-dark-muted);
}

@media (max-width: 1000px) {
  .fl-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .fl-footer { padding-top: 56px; }
  .fl-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .fl-footer-bottom { flex-direction: column; gap: 10px; }
}