/*
Theme Name: Kintsugi Muro
Theme URI: https://kintsugi-collective.org.uk/
Author: Kintsugi Collective CIC
Description: The Muro membership portal theme for Kintsugi Collective CIC.
Version: 1.0.0
Text Domain: kintsugi-muro
*/
:root {
  --ink: #0c0e0f;
  --ink-soft: #141719;
  --ivory: #f5f1e7;
  --paper: #e9e3d5;
  --gold: #d4af37;
  --gold-light: #e6c769;
  --muted: #b9b4aa;
  --line: rgba(212, 175, 55, .33);
  --shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--ivory); font-family: "DM Sans", Arial, sans-serif; font-size: 16px; line-height: 1.65; }
a { color: var(--gold-light); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: #fff0aa; }
button, input, select, textarea { font: inherit; }
.site-shell { min-height: 100vh; background: radial-gradient(circle at 77% 4%, rgba(212,175,55,.12), transparent 27rem), radial-gradient(circle at 5% 65%, rgba(212,175,55,.06), transparent 35rem), var(--ink); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap: 20px; max-width: 1220px; margin: 0 auto; padding: 22px 28px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { display: inline-flex; align-items:center; gap: 11px; color: var(--ivory); text-decoration: none; }
.brand-mark { width: 40px; height: 40px; border: 1px solid var(--gold); border-radius: 50%; display:grid; place-items:center; color: var(--gold); font-family: "Noto Serif JP", serif; font-size: 17px; box-shadow: 0 0 0 5px rgba(212,175,55,.07); }
.brand-wordmark { display: flex; flex-direction: column; font-family: "Cormorant Garamond", Georgia, serif; letter-spacing: .04em; line-height: .85; font-size: 25px; }
.brand-wordmark small { color: var(--gold); font-family: "DM Sans", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .19em; margin-top: 7px; }
.main-nav { display:flex; align-items:center; flex-wrap: wrap; justify-content:flex-end; gap: 7px 18px; }
.main-nav a { color: rgba(245,241,231,.77); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.main-nav a:hover { color: var(--gold); }
.main-nav .nav-return { color: var(--gold-light); border-right: 1px solid rgba(212,175,55,.42); padding-right: 18px; }
.main-nav .nav-return:hover { color: #fff0aa; }
.nav-account { border: 1px solid var(--gold); padding: 7px 11px; color: var(--gold) !important; }
.site-main { max-width: 1220px; margin: 0 auto; padding: 0 28px 70px; }
.muro-hero { min-height: 410px; display:grid; align-content:center; grid-template-columns: minmax(0, 1.35fr) minmax(245px, .65fr); gap: 50px; padding: 78px 0 66px; border-bottom: 1px solid var(--line); }
.eyebrow { display: flex; align-items:center; gap: 12px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow::after { content:""; height:1px; width: 65px; background: var(--gold); opacity: .55; }
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: .96; letter-spacing: -.025em; }
h1 { max-width: 760px; margin: 22px 0 22px; font-size: clamp(47px, 7vw, 88px); }
h1 em, h2 em { color: var(--gold); font-weight: 500; }
.intro { max-width: 620px; color: rgba(245,241,231,.72); font-size: 18px; line-height: 1.75; }
.hero-aside { align-self:end; position: relative; padding: 27px; border: 1px solid var(--line); background: rgba(255,255,255,.035); box-shadow: var(--shadow); }
.hero-aside::before { content:"金継ぎ"; position:absolute; top: -25px; right: 20px; color: rgba(212,175,55,.24); font: 51px "Noto Serif JP", serif; }
.hero-aside h2 { font-size: 39px; margin: 14px 0; }
.hero-aside p { margin: 0; color: var(--muted); font-size: 14px; }
.button, .pmpro_btn, input[type=submit], button[type=submit] { display: inline-flex; align-items:center; justify-content:center; min-height: 45px; border: 1px solid var(--gold); border-radius: 0; padding: 0 20px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-decoration:none; text-transform: uppercase; transition: transform .16s ease-out, background .16s ease-out; }
.button:hover, .pmpro_btn:hover, input[type=submit]:hover, button[type=submit]:hover { background: var(--gold-light); color: var(--ink); transform: translateY(-2px); }
.button.outline { background: transparent; color: var(--gold); }
.button.outline:hover { background: rgba(212,175,55,.12); }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top: 30px; }
.section { padding: 68px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.section-heading { display:grid; grid-template-columns: 1fr minmax(230px,.6fr); gap: 36px; align-items:end; margin-bottom:34px; }
.section-heading h2 { margin:12px 0 0; font-size: clamp(37px, 5vw, 58px); }
.section-heading p { color: var(--muted); margin:0; }
.tier-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier-card { min-height: 372px; display:flex; flex-direction:column; padding: 27px; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.025); }
.tier-card.silver { border-color: rgba(190,201,215,.55); background: linear-gradient(145deg, rgba(148,163,184,.14), rgba(255,255,255,.02)); }
.tier-card.gold { border-color: var(--gold); background: linear-gradient(145deg, rgba(212,175,55,.18), rgba(255,255,255,.02)); box-shadow: 12px 12px 0 rgba(212,175,55,.10); }
.tier-meta { display:flex; align-items:center; justify-content:space-between; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.tier-card h3 { margin: 19px 0 6px; font-size: 37px; }
.tier-price { margin: 0 0 20px; color: var(--ivory); font-family:"Cormorant Garamond", Georgia, serif; font-size: 26px; }
.tier-card ul { flex:1; margin: 0 0 28px; padding:0; list-style:none; color:var(--muted); font-size:14px; }
.tier-card li { position:relative; margin: 10px 0; padding-left: 18px; }
.tier-card li::before { content:"✦"; position:absolute; left:0; color:var(--gold); font-size:10px; top:3px; }
.feature-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background: var(--line); border: 1px solid var(--line); }
.feature { padding: 26px; background: var(--ink-soft); }
.feature .number { color:var(--gold); font-family:"Cormorant Garamond", Georgia, serif; font-size: 28px; }
.feature h3 { margin: 18px 0 8px; font-size: 27px; }
.feature p { margin:0; color:var(--muted); font-size:14px; }
.notice { padding:24px 27px; border-left:3px solid var(--gold); background: rgba(212,175,55,.08); color: rgba(245,241,231,.77); }
.notice strong { color:var(--gold-light); }
.entry-header { padding: 56px 0 30px; border-bottom: 1px solid var(--line); }
.entry-header h1 { margin-bottom:0; font-size:clamp(45px, 7vw, 78px); }
.entry-content { max-width:820px; padding: 42px 0; color: rgba(245,241,231,.8); }
.entry-content h2 { margin-top:52px; font-size:44px; color:var(--ivory); }
.entry-content h3 { font-size:32px; }
.entry-content p, .entry-content li { color: rgba(245,241,231,.76); }
.entry-content blockquote { margin:32px 0; padding: 10px 0 10px 24px; border-left:2px solid var(--gold); color: var(--gold-light); font-family:"Cormorant Garamond", Georgia, serif; font-size:28px; line-height:1.2; }
.entry-content .wp-block-group { padding:22px; margin:25px 0; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.muro-dashboard { padding: 46px 0; }
.dashboard-greeting { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.dashboard-greeting h1 { margin:10px 0 0; font-size:54px; }
.dashboard-grid { display:grid; grid-template-columns:1.6fr .8fr; gap:18px; margin-top:24px; }
.panel { padding:28px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.025); }
.panel h2 { margin:10px 0 12px; font-size:37px; }
.panel p { color:var(--muted); }
.panel ul { padding-left: 18px; color:var(--muted); }
.locked { opacity:.75; border-style:dashed; }
.site-footer { max-width:1220px; margin:0 auto; padding:40px 28px; border-top:1px solid rgba(255,255,255,.1); color: rgba(245,241,231,.48); font-size:12px; }
.site-footer a { color:rgba(245,241,231,.65); }
#loginform, .pmpro_login_wrap, .pmpro_checkout, #pmpro_account, .pmpro_member_directory { max-width: 700px; padding: 28px; background: rgba(255,255,255,.04); border:1px solid var(--line); }
label { display:block; margin: 18px 0 5px; color:var(--ivory); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
input[type=text], input[type=email], input[type=password], textarea, select { width:100%; padding:12px 14px; border:1px solid rgba(255,255,255,.25); border-radius:0; background:rgba(0,0,0,.28); color:var(--ivory); }
.pmpro_level, .pmpro_card { border-color:var(--line) !important; border-radius:0 !important; background:rgba(255,255,255,.025) !important; color:var(--ivory) !important; }
.pmpro_card h2, .pmpro_level h2 { color:var(--ivory) !important; }
.pmpro_card p, .pmpro_level p, .pmpro_card li, .pmpro_level li { color:var(--muted) !important; }
@media (max-width: 860px) { .site-header { align-items:flex-start; } .main-nav { max-width: 62%; } .main-nav .nav-return { border-right:0; padding-right:0; width:100%; } .muro-hero, .section-heading, .dashboard-grid { grid-template-columns:1fr; } .tier-grid { grid-template-columns:1fr; } .feature-grid { grid-template-columns:1fr 1fr; } .muro-hero { padding-top:54px; } }
@media (max-width: 560px) { .site-header, .site-main, .site-footer { padding-left:20px; padding-right:20px; } .site-header { flex-direction:column; } .main-nav { max-width:none; justify-content:flex-start; } .feature-grid { grid-template-columns:1fr; } h1 { font-size:48px; } }