/*
Theme Name: Thread Atlas
Theme URI: https://example.com/
Author: AnyGen
Author URI: https://example.com/
Description: Premium, narrative-first DTC theme (WooCommerce-ready). Built for curated collections, cultural storytelling PDPs, and a Studio customization entry.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thread-atlas
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, e-commerce
*/

:root {
  --paper: #F5F2EB;
  --ink: #2D2D2D;
  --clay: #8B5E3C;
  --sage: #5A6E5A;
  --vermilion: #FF4500;
  --electric: #4169E1;

  --max: 1200px;
  --gutter: 24px;
  --radius: 16px;

  --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-heading: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.6; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 12px; border-radius: 10px; z-index: 9999; }
.skip-link:focus { left: 8px; }

.topbar { font-size: 13px; letter-spacing: .02em; border-bottom: 1px solid rgba(45,45,45,.12); padding: 10px 0; }
.header { position: sticky; top: 0; background: rgba(245,242,235,.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(45,45,45,.12); z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 16px; }
.brand a { font-family: var(--font-heading); font-weight: 600; letter-spacing: .02em; font-size: 20px; text-decoration: none; }
.nav ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.nav a { text-decoration: none; padding: 8px 10px; border-radius: 12px; }
.nav a:hover, .nav a:focus-visible { background: rgba(45,45,45,.06); outline: none; }

.hero { padding: 72px 0 48px; }
.hero h1 { font-family: var(--font-heading); font-size: clamp(34px, 4vw, 52px); line-height: 1.12; margin: 0 0 14px; letter-spacing: .01em; }
.hero p { max-width: 62ch; font-size: 18px; margin: 0 0 26px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .nav ul { flex-wrap: wrap; justify-content: flex-end; } }

.card { border: 1px solid rgba(45,45,45,.12); border-radius: var(--radius); padding: 18px; background: rgba(255,255,255,.35); }
.card h3 { font-family: var(--font-heading); margin: 0 0 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(45,45,45,.18); background: transparent; text-decoration: none; }
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { filter: brightness(.95); }
.btn--accent { border-color: rgba(255,69,0,.35); }

.footer { border-top: 1px solid rgba(45,45,45,.12); padding: 42px 0; margin-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; }
.footer small { opacity: .75; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }

/* WooCommerce minor defaults */
.woocommerce div.product .product_title { font-family: var(--font-heading); }
.woocommerce .price { font-weight: 600; }

/* Grid 4 columns */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-4 { grid-template-columns: 1fr; } }