/* =========================================================
   RED CHAIR HOMES — Design System
   Tokens: color, type, spacing, motion
   ========================================================= */

:root{
  /* Brand colour tokens */
  --color-primary: #B22222;       /* deep red — brand */
  --color-primary-dark: #8C1A1A;
  --color-secondary: #2E2E2E;     /* charcoal ink */
  --color-accent: #F7F7F7;        /* soft panel */
  --color-cta: #D84315;           /* burnt orange CTA */
  --color-cta-dark: #B6360F;
  --color-paper: #FFFCF8;         /* warm paper background */
  --color-line: #E6DED2;          /* hairline border, warm */
  --color-muted: #6E6660;         /* muted warm grey text */

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-meta: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Radius / shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 8px 30px rgba(46,29,21,0.07);
  --shadow-lift: 0 18px 50px rgba(46,29,21,0.12);

  /* Layout */
  --maxw: 1180px;
  --nav-h: 76px;

  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --color-paper: #1B1715;
  --color-secondary: #F1ECE6;
  --color-accent: #241F1C;
  --color-line: #382F29;
  --color-muted: #B6ABA1;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--color-paper);
  color:var(--color-secondary);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition), color var(--transition);
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 var(--space-2);
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.2rem, 5vw, 3.6rem); font-weight:500;}
h2{font-size:clamp(1.7rem, 3vw, 2.4rem);}
h3{font-size:1.3rem;}
p{margin:0 0 var(--space-2);}

.eyebrow{
  font-family:var(--font-meta);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-primary);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:var(--space-1);
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--color-primary); color:#fff;
  padding:10px 18px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

:focus-visible{
  outline:3px solid var(--color-cta);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Chair mark (signature motif) ---------- */
.chair-mark{
  width:1em; height:1em;
  flex:none;
  color:var(--color-primary);
}
.chair-mark path,.chair-mark line{ vector-effect:non-scaling-stroke; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--color-paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:1.25rem; font-weight:600;
  color:var(--color-secondary);
}
.brand .chair-mark{width:26px; height:26px;}
.nav-links{
  display:flex; align-items:center; gap:var(--space-4);
  list-style:none;
}
.nav-links a{
  font-size:0.95rem; font-weight:500; color:var(--color-secondary);
  position:relative; padding:6px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--color-cta); transition:width var(--transition);
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-actions{display:flex; align-items:center; gap:var(--space-2);}

.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--color-line);
  color:var(--color-secondary); transition:var(--transition);
}
.icon-btn:hover{background:var(--color-accent);}

.menu-toggle{display:none; background:none; border:none; padding:8px;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--color-secondary); margin:5px 0; transition:var(--transition);}

@media (max-width: 880px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 0 0;
    background:var(--color-paper);
    flex-direction:column; align-items:flex-start; gap:var(--space-3);
    padding:var(--space-4) var(--space-3);
    transform:translateX(100%); transition:transform var(--transition);
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .menu-toggle{display:block;}
  .nav-links a{font-size:1.1rem;}
}

/* ---------- Reading progress ---------- */
.reading-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--color-cta); z-index:120; transition:width 80ms linear;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px;
  font-weight:600; font-size:0.95rem;
  border:1px solid transparent; transition:var(--transition);
}
.btn-primary{background:var(--color-cta); color:#fff;}
.btn-primary:hover{background:var(--color-cta-dark); transform:translateY(-1px);}
.btn-outline{background:transparent; border-color:var(--color-secondary); color:var(--color-secondary);}
.btn-outline:hover{background:var(--color-secondary); color:var(--color-paper);}
.btn-sm{padding:9px 18px; font-size:0.85rem;}

/* ---------- Hero ---------- */
.hero{
  padding:var(--space-6) 0 var(--space-5);
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-5);
  align-items:center;
}
.hero h1{margin-bottom:var(--space-2);}
.hero p.lead{font-size:1.15rem; color:var(--color-muted); max-width:480px;}
.hero-cta{display:flex; gap:var(--space-2); margin-top:var(--space-3); flex-wrap:wrap;}

.room-card{
  position:relative;
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg, #E7DCCF, #C9B6A0 60%, #B22222 130%);
  aspect-ratio:4/3;
  box-shadow:var(--shadow-lift);
  display:flex; align-items:flex-end; padding:var(--space-3);
  overflow:hidden;
}
.room-card::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 26px);
}
.room-card .chair-mark{width:64px; height:64px; color:#fff; opacity:0.85; position:relative;}

/* ---------- Sections ---------- */
section{padding:var(--space-5) 0;}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-3); margin-bottom:var(--space-4); flex-wrap:wrap;
}
.section-head p{color:var(--color-muted); margin:0; max-width:520px;}

.bg-accent{background:var(--color-accent);}

/* ---------- Cards / Grid ---------- */
.grid{display:grid; gap:var(--space-3);}
.grid-3{grid-template-columns:repeat(3, 1fr);}
.grid-4{grid-template-columns:repeat(4, 1fr);}
.grid-2{grid-template-columns:repeat(2, 1fr);}
@media (max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .hero-grid{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

.card{
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
[data-theme="dark"] .card{background:#221D1A;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift);}
.card-top-bar{height:4px; background:var(--color-primary);}
.card-img{aspect-ratio:16/10; background:var(--color-accent); overflow:hidden;}
.card-img img{width:100%; height:100%; object-fit:cover;}
.card-body{padding:var(--space-3); display:flex; flex-direction:column; gap:8px; flex:1;}
.card-tag{
  font-family:var(--font-meta); font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--color-primary);
}
.card-body h3{margin-bottom:4px;}
.card-meta{
  font-family:var(--font-meta); font-size:0.75rem; color:var(--color-muted);
  display:flex; gap:10px; align-items:center; margin-top:auto; padding-top:8px;
}
.card-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--color-muted);}

/* Category swatch */
.swatch{
  border-radius:var(--radius-md);
  padding:var(--space-3);
  border:1px solid var(--color-line);
  border-top:5px solid var(--color-primary);
  background:#fff;
  transition:var(--transition);
}
[data-theme="dark"] .swatch{background:#221D1A;}
.swatch:hover{box-shadow:var(--shadow-soft); transform:translateY(-3px);}
.swatch .chair-mark{width:28px; height:28px; margin-bottom:10px;}

/* ---------- List with chair bullets ---------- */
.chair-list{list-style:none; display:flex; flex-direction:column; gap:10px;}
.chair-list li{display:flex; gap:10px; align-items:flex-start;}
.chair-list .chair-mark{width:16px; height:16px; margin-top:4px; flex-shrink:0;}

/* ---------- Pros / Cons ---------- */
.pros-cons{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);}
@media (max-width:680px){.pros-cons{grid-template-columns:1fr;}}
.pc-box{border:1px solid var(--color-line); border-radius:var(--radius-md); padding:var(--space-3);}
.pc-box.pros{border-top:4px solid #4C7A53;}
.pc-box.cons{border-top:4px solid var(--color-primary);}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--color-line); border-radius:var(--radius-md);}
table{width:100%; border-collapse:collapse; min-width:480px;}
th,td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--color-line); font-size:0.92rem;}
th{font-family:var(--font-meta); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-muted); background:var(--color-accent);}
tr:last-child td{border-bottom:none;}

/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--color-secondary); color:var(--color-paper);
  border-radius:var(--radius-lg); padding:var(--space-5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
}
[data-theme="dark"] .newsletter{background:#0F0D0C;}
.newsletter h2{color:#fff; margin-bottom:6px;}
.newsletter p{color:#C9C2BA; margin:0;}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter-form input{
  padding:13px 18px; border-radius:999px; border:1px solid #46403B;
  background:#36302B; color:#fff; min-width:240px; font-family:var(--font-body);
}
.newsletter-form input::placeholder{color:#A89F95;}
.form-msg{font-size:0.85rem; margin-top:8px;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--color-line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none;
  padding:var(--space-3) 0; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-display); font-size:1.05rem; color:var(--color-secondary);
}
.faq-q .plus{transition:transform var(--transition); color:var(--color-primary); font-size:1.4rem; flex-shrink:0; margin-left:12px;}
.faq-q[aria-expanded="true"] .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--transition); color:var(--color-muted);}
.faq-a-inner{padding-bottom:var(--space-3);}

/* ---------- Forms ---------- */
.form-field{margin-bottom:var(--space-3);}
label{display:block; font-weight:600; font-size:0.9rem; margin-bottom:6px;}
input[type="text"], input[type="email"], textarea, select{
  width:100%; padding:13px 16px; border:1px solid var(--color-line); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:0.95rem; background:#fff; color:var(--color-secondary);
}
[data-theme="dark"] input[type="text"],[data-theme="dark"] input[type="email"],[data-theme="dark"] textarea, [data-theme="dark"] select{background:#221D1A; color:#F1ECE6;}
textarea{min-height:140px; resize:vertical;}
.hint{font-size:0.8rem; color:var(--color-muted); margin-top:4px;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--color-secondary); color:#D9D3CC; padding:var(--space-5) 0 var(--space-3);
  margin-top:var(--space-5);
}
[data-theme="dark"] .site-footer{background:#0F0D0C;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-4);}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand{display:flex; align-items:center; gap:8px; color:#fff; font-family:var(--font-display); font-size:1.15rem; margin-bottom:10px;}
.footer-col h4{color:#fff; font-family:var(--font-meta); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px;}
.footer-col ul{display:flex; flex-direction:column; gap:10px;}
.footer-col a{color:#C9C2BA; font-size:0.92rem; transition:color var(--transition);}
.footer-col a:hover{color:#fff;}
.footer-meta{font-size:0.85rem; color:#9E968D; line-height:1.7;}
.footer-bottom{
  border-top:1px solid #423D38; margin-top:var(--space-4); padding-top:var(--space-3);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.82rem; color:#9E968D;
}
.social-row{display:flex; gap:10px; margin-top:14px;}
.social-row a{width:34px; height:34px; border:1px solid #46403B; border-radius:50%; display:flex; align-items:center; justify-content:center;}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:48px; height:48px; border-radius:50%;
  background:var(--color-primary); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lift); opacity:0; transform:translateY(10px); pointer-events:none;
  transition:var(--transition);
}
.back-to-top.visible{opacity:1; transform:translateY(0); pointer-events:auto;}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:150;
  max-width:560px; margin:0 auto;
  background:var(--color-secondary); color:#F1ECE6;
  border-radius:var(--radius-lg); padding:var(--space-3);
  box-shadow:var(--shadow-lift);
  transform:translateY(140%); transition:transform 320ms cubic-bezier(.2,.8,.2,1);
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{font-size:0.88rem; color:#C9C2BA; margin-bottom:var(--space-2);}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap;}
.cookie-actions .btn{padding:10px 18px; font-size:0.85rem;}
.btn-ghost{background:transparent; border:1px solid #5C554F; color:#F1ECE6;}
.btn-ghost:hover{background:#3A342F;}

.cookie-modal-backdrop{
  position:fixed; inset:0; background:rgba(20,16,13,0.55); z-index:160;
  display:none; align-items:center; justify-content:center; padding:var(--space-3);
}
.cookie-modal-backdrop.open{display:flex;}
.cookie-modal{
  background:var(--color-paper); border-radius:var(--radius-lg); max-width:520px; width:100%;
  padding:var(--space-4); max-height:85vh; overflow-y:auto;
}
.toggle-row{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--color-line);}
.switch{position:relative; width:46px; height:26px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch .slider{position:absolute; inset:0; background:var(--color-line); border-radius:999px; transition:var(--transition);}
.switch .slider::before{content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:var(--transition);}
.switch input:checked + .slider{background:var(--color-cta);}
.switch input:checked + .slider::before{transform:translateX(20px);}
.switch input:disabled + .slider{opacity:0.5;}

/* ---------- Newsletter popup ---------- */
.popup-backdrop{
  position:fixed; inset:0; background:rgba(20,16,13,0.5); z-index:170;
  display:none; align-items:center; justify-content:center; padding:var(--space-3);
}
.popup-backdrop.open{display:flex;}
.popup-box{
  background:var(--color-paper); border-radius:var(--radius-lg); max-width:420px; width:100%;
  padding:var(--space-4); position:relative; box-shadow:var(--shadow-lift); text-align:center;
}
.popup-close{position:absolute; top:14px; right:14px; background:none; border:none; font-size:1.3rem; color:var(--color-muted);}
.popup-box .chair-mark{width:40px; height:40px; margin:0 auto 14px;}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{font-family:var(--font-meta); font-size:0.78rem; color:var(--color-muted); margin-bottom:var(--space-3);}
.breadcrumbs a{color:var(--color-muted);}
.breadcrumbs a:hover{color:var(--color-primary);}

/* ---------- Article layout ---------- */
.article-layout{display:grid; grid-template-columns:1fr 260px; gap:var(--space-5); align-items:start;}
@media (max-width:900px){.article-layout{grid-template-columns:1fr;}}
.article-body h2{margin-top:var(--space-4);}
.article-body h3{margin-top:var(--space-3);}
.article-hero{border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--space-3); aspect-ratio:16/8;}
.toc{
  position:sticky; top:calc(var(--nav-h) + 20px);
  border:1px solid var(--color-line); border-radius:var(--radius-md); padding:var(--space-3);
  background:var(--color-accent);
}
.toc h4{font-family:var(--font-meta); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px;}
.toc ul{display:flex; flex-direction:column; gap:8px;}
.toc a{font-size:0.88rem; color:var(--color-muted);}
.toc a.active, .toc a:hover{color:var(--color-primary);}
.share-row{display:flex; gap:10px; margin-top:var(--space-3);}

.byline{display:flex; align-items:center; gap:12px; margin-bottom:var(--space-3); color:var(--color-muted); font-size:0.9rem;}
.byline .avatar{width:42px; height:42px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display);}
.disclosure-box{
  background:var(--color-accent); border-left:3px solid var(--color-primary);
  padding:14px 18px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:0.9rem; color:var(--color-muted); margin-bottom:var(--space-3);
}

/* ---------- Legal pages ---------- */
.legal-page h2{margin-top:var(--space-4); border-top:1px solid var(--color-line); padding-top:var(--space-3);}
.legal-page h2:first-of-type{border-top:none; padding-top:0;}
.legal-meta{color:var(--color-muted); font-size:0.9rem; margin-bottom:var(--space-4);}
.legal-page ul{padding-left:1.3rem; margin-bottom:var(--space-2);}
.legal-page li{margin-bottom:6px;}

/* ---------- 404 ---------- */
.error-page{
  min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space-6) 0;
}
.error-page .chair-mark{width:100px; height:100px; margin-bottom:var(--space-3);}

/* ---------- Compliance notice ---------- */
.compliance-notice{
  border:1px solid var(--color-line); border-radius:var(--radius-md);
  padding:var(--space-3); background:var(--color-accent); font-size:0.88rem; color:var(--color-muted);
}

/* ---------- Utility ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.muted{color:var(--color-muted);}
.fade-up{opacity:0; transform:translateY(16px); transition:opacity 600ms ease, transform 600ms ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
.tag-row{display:flex; gap:8px; flex-wrap:wrap;}
.tag-chip{
  font-family:var(--font-meta); font-size:0.72rem; padding:6px 12px; border-radius:999px;
  border:1px solid var(--color-line); color:var(--color-muted);
}
.tag-chip:hover{border-color:var(--color-primary); color:var(--color-primary);}
.search-box{display:flex; align-items:center; gap:10px; border:1px solid var(--color-line); border-radius:999px; padding:10px 18px; background:#fff;}
[data-theme="dark"] .search-box{background:#221D1A;}
.search-box input{border:none; background:none; flex:1; font-family:inherit; font-size:0.95rem; color:inherit;}
.search-box input:focus{outline:none;}

.counter-row{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); text-align:center;}
@media (max-width:680px){.counter-row{grid-template-columns:repeat(2,1fr);}}
.counter-num{font-family:var(--font-display); font-size:2.4rem; color:var(--color-primary);}
.counter-label{font-family:var(--font-meta); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-muted);}

.pagination{display:flex; justify-content:space-between; border-top:1px solid var(--color-line); padding-top:var(--space-3); margin-top:var(--space-4);}
.pagination a{display:flex; flex-direction:column; max-width:45%;}
.pagination .dir{font-family:var(--font-meta); font-size:0.7rem; text-transform:uppercase; color:var(--color-muted);}
.pagination .title{font-family:var(--font-display);}
.pagination .next{text-align:right; margin-left:auto;}