/*
Theme Name: HeritageLXR
Theme URI: https://heritagelxr.com
Author: HeritageLXR
Author URI: https://instagram.com/heritagelxr
Description: An ultra-luxury editorial theme for HeritageLXR - Heritage. Elegance. Luxury. Built from the Issue 001 design language: cream paper, espresso deco display type, gold hairline page frame.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heritagelxr
Tags: editorial, magazine, luxury, custom-colors, featured-images
*/

/* ============================================================
   HERITAGELXR DESIGN TOKENS
   Drawn directly from Magazine Issue 001
   ============================================================ */
:root {
  --cream: #F7F4ED;          /* page paper */
  --panel: #FDFBF6;          /* card panels */
  --espresso: #4A352B;       /* deco display brown */
  --ink: #211C18;            /* body text */
  --gold: #A87C2E;           /* hairline rules, accents */
  --gold-soft: #C6A85B;      /* hover, soft accents */
  --bronze: #8C6314;         /* footer band (magazine back page) */
  --muted: #7C7164;          /* meta text */

  --font-deco: 'Poiret One', sans-serif;        /* masthead + eyebrows */
  --font-serif: 'Cormorant Garamond', serif;    /* headlines, quotes */
  --font-body: 'Jost', sans-serif;              /* body, nav, meta */

  --frame-gap: 14px;         /* gold page frame inset */
  --max-w: 1180px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;       /* 17px base - generous for problem eyes */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--espresso); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--gold); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* The signature: a fixed gold hairline page frame, exactly like the
   magazine's inset border on every spread. */
.lxr-frame {
  position: fixed;
  inset: var(--frame-gap);
  border: 1px solid var(--gold);
  pointer-events: none;
  z-index: 999;
}
@media (max-width: 640px) { :root { --frame-gap: 8px; } }

.lxr-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ============================================================
   TYPE
   ============================================================ */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; margin: 0 0 .6em; }

.lxr-eyebrow {
  font-family: var(--font-deco);
  font-size: .95rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--espresso);
  display: block;
  margin-bottom: 1rem;
}
.lxr-eyebrow::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin-top: .9rem;
}

.lxr-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 500;
}

/* ============================================================
   HEADER / MASTHEAD
   ============================================================ */
.lxr-header {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem;
}
.lxr-masthead {
  font-family: var(--font-deco);
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: clamp(.18em, 2vw, .32em);
  text-transform: uppercase;
  color: var(--espresso);
  margin: 0;
}
.lxr-masthead a { color: inherit; }
.lxr-tagline {
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: .9rem;
}

.lxr-nav {
  margin-top: 1.75rem;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: .85rem 0;
}
.lxr-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 3rem);
}
.lxr-nav a {
  font-size: .82rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* ============================================================
   HERO - latest issue as the thesis
   ============================================================ */
.lxr-hero {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.lxr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .lxr-hero-grid { grid-template-columns: 1fr; } }

.lxr-cover {
  border: 1px solid var(--gold);
  padding: 10px;                 /* matted, like a framed cover */
  background: var(--panel);
  box-shadow: 0 30px 60px -30px rgba(33, 28, 24, .35);
}
.lxr-cover img { width: 100%; }

.lxr-hero-kicker {
  font-family: var(--font-deco);
  letter-spacing: .4em;
  text-transform: uppercase;
  font-size: .9rem;
  color: var(--gold);
}
.lxr-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.05;
  margin: 1rem 0 1.25rem;
}
.lxr-hero-excerpt {
  font-size: 1.125rem;
  max-width: 34em;
  color: var(--ink);
}

.lxr-btn {
  display: inline-block;
  margin-top: 1.75rem;
  padding: .95rem 2.4rem;
  border: 1px solid var(--espresso);
  font-size: .82rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--espresso);
  background: transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.lxr-btn:hover {
  background: var(--espresso);
  color: var(--cream);
  border-color: var(--espresso);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.lxr-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.lxr-section + .lxr-section { border-top: 1px solid rgba(168,124,46,.4); }

/* Stories grid */
.lxr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
@media (max-width: 980px) { .lxr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lxr-grid { grid-template-columns: 1fr; } }

.lxr-card { background: transparent; }
.lxr-card-media {
  border: 1px solid var(--gold);
  padding: 8px;
  background: var(--panel);
  margin-bottom: 1.1rem;
}
.lxr-card-media img {
  width: 100%;
  aspect-ratio: 4 / 5;            /* the magazine + Instagram ratio */
  object-fit: cover;
  filter: saturate(.96);
  transition: transform .5s ease;
}
.lxr-card:hover .lxr-card-media img { transform: scale(1.025); }

.lxr-card-cat {
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.lxr-card-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  margin: .45rem 0 .4rem;
}
.lxr-card-excerpt { font-size: .98rem; color: var(--muted); }
.lxr-card-meta {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .7rem;
}

/* About strip */
.lxr-about {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.lxr-about p {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.5;
}

/* ============================================================
   SINGLE ARTICLE / ISSUE
   ============================================================ */
.lxr-article { max-width: 720px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 0; }
.lxr-article-header { text-align: center; margin-bottom: 2.5rem; }
.lxr-article-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
}
.lxr-article-meta {
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem;
}
.lxr-article-hero {
  border: 1px solid var(--gold);
  padding: 10px;
  background: var(--panel);
  margin: 0 0 2.75rem;
}

.lxr-content { font-size: 1.125rem; line-height: 1.8; }
.lxr-content > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.6em;
  float: left;
  line-height: .82;
  padding-right: .12em;
  color: var(--espresso);
}
.lxr-content h2, .lxr-content h3 {
  font-family: var(--font-serif);
  margin-top: 2.2em;
}
.lxr-content blockquote {
  margin: 2.5rem 0;
  padding: 0 0 0 1.75rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--espresso);
}
.lxr-content img { margin: 2rem auto; }
.lxr-content a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ============================================================
   ARCHIVE / BLOG INDEX
   ============================================================ */
.lxr-archive-title { text-align: center; padding-top: clamp(2rem, 5vw, 3.5rem); }

.lxr-pagination {
  display: flex; justify-content: center; gap: 1.5rem;
  padding: 3rem 0;
  font-size: .82rem; letter-spacing: .26em; text-transform: uppercase;
}

/* ============================================================
   FOOTER - the bronze band from the magazine back page
   ============================================================ */
.lxr-footer {
  margin-top: clamp(3rem, 7vw, 6rem);
  background: var(--bronze);
  color: var(--cream);
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem calc(2.5rem + var(--frame-gap));
}
.lxr-footer .lxr-masthead { color: var(--cream); font-size: clamp(1.4rem, 3.5vw, 2rem); }
.lxr-footer-tagline {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  margin: 1rem 0 1.5rem;
  color: rgba(247,244,237,.92);
}
.lxr-footer a { color: var(--cream); }
.lxr-footer a:hover { color: #F1DFB2; }
.lxr-footer-ig {
  font-size: .85rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.lxr-footer-legal {
  margin-top: 2.25rem;
  font-size: .72rem;
  letter-spacing: .14em;
  color: rgba(247,244,237,.7);
}

/* ============================================================
   WP CORE NICETIES
   ============================================================ */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute;
}
.alignwide { max-width: 1000px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; }
.wp-block-image figcaption {
  text-align: center; font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}