:root {
  --black: #141211;
  --charcoal: #2C2A27;
  --ochre: #C4956A;
  --ochre-dark: #A67B52;
  --forest: #3D5A47;
  --cream: #F5F2ED;
  --paper: #EDE8E0;
  --stone: #B8AFA6;
  --stone-light: #D4CFC9;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Karla', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--ochre); color: var(--black); }
a { color: inherit; }

/* Grain */
body::after {
  content:'';position:fixed;inset:0;pointer-events:none;z-index:99999;opacity:0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px;
}

/* ═══ NAV ═══ */
nav.araya-nav {
  position:fixed;top:0;left:0;right:0;z-index:10000;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(24px,5vw,72px);
  background:rgba(20,18,17,0.94);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(196,149,106,0.06);
}
.nav-logo { font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--cream);text-decoration:none; }
.nav-logo em { font-style:italic;color:var(--ochre); }
.nav-links { display:flex;gap:28px;list-style:none; }
.nav-links a {
  font-family:var(--mono);font-size:0.66rem;color:var(--stone);text-decoration:none;
  letter-spacing:0.14em;text-transform:uppercase;transition:color 0.3s;
}
.nav-links a:hover { color:var(--cream); }

/* ═══ HERO ═══ */
.hero {
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
}
.hero-left {
  display:flex;flex-direction:column;justify-content:center;
  padding:100px clamp(32px,6vw,96px) 80px;
}
.hero-label {
  font-family:var(--serif);font-size:1.1rem;font-style:italic;
  color:var(--ochre-dark);margin-bottom:24px;
  opacity:0;animation:fadeUp 0.8s ease 0.3s forwards;
}
.hero-title {
  font-family:var(--serif);font-size:clamp(2.8rem,5vw,4.8rem);font-weight:300;
  line-height:1.08;color:var(--black);margin-bottom:28px;
  opacity:0;animation:fadeUp 0.8s ease 0.5s forwards;
}
.hero-title em { font-style:italic;color:var(--forest); }
.hero-sub {
  font-size:1rem;font-weight:300;line-height:1.75;color:var(--charcoal);
  max-width:420px;margin-bottom:44px;
  opacity:0;animation:fadeUp 0.8s ease 0.7s forwards;
}
.hero-cta {
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--black);text-decoration:none;border-bottom:1px solid var(--ochre);
  padding-bottom:8px;width:fit-content;transition:color 0.3s;
  opacity:0;animation:fadeUp 0.8s ease 0.9s forwards;
}
.hero-cta:hover { color:var(--ochre-dark); }
.hero-cta svg { width:16px;height:16px;transition:transform 0.3s; }
.hero-cta:hover svg { transform:translateX(4px); }

.hero-right {
  background:var(--black);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.hero-right img {
  width:320px;height:320px;object-fit:contain;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,0.4));
  opacity:0;animation:fadeIn 1.2s ease 0.5s forwards;
}
.hero-scroll {
  position:absolute;bottom:32px;right:32px;writing-mode:vertical-rl;
  font-family:var(--mono);font-size:0.58rem;letter-spacing:0.25em;text-transform:uppercase;
  color:rgba(245,242,237,0.2);
}

/* ═══ SECTION BASICS ═══ */
.pad { padding:clamp(72px,10vw,140px) clamp(28px,6vw,96px); }
.divider { padding:0 clamp(28px,6vw,96px); }
.divider-line { height:1px;background:linear-gradient(to right,var(--ochre),var(--stone-light) 40%,transparent 80%); }

/* ═══ THREE PILLARS ═══ */
.pillars-grid {
  display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,6vw,80px);
  margin-bottom:48px;
}
.pillar-section-title {
  font-family:var(--serif);font-size:1.5rem;font-weight:600;
  color:var(--black);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.04em;
}
.pillar-items {
  list-style:none;display:flex;flex-direction:column;gap:0;
}
.pillar-items li {
  font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:400;
  font-style:italic;color:var(--charcoal);
  padding:14px 0;border-bottom:1px solid var(--stone-light);
  cursor:pointer;transition:all 0.3s;
}
.pillar-items li:hover { color:var(--ochre-dark);padding-left:12px; }
.pillar-items li:first-child { border-top:1px solid var(--stone-light); }

/* ═══ HOW TO USE ═══ */
.howto {
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  margin-top:48px;padding-top:48px;border-top:1px solid var(--stone-light);
}
.howto-item {}
.howto-label {
  font-family:var(--mono);font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--ochre-dark);margin-bottom:8px;
}
.howto-text {
  font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--charcoal);line-height:1.5;
}

/* ═══ MUSIC PLAYER ═══ */
.music-section { background:var(--black);position:relative; }

.album-header {
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:end;
  margin-bottom:48px;
}
.album-art {
  width:220px;height:220px;border-radius:4px;object-fit:cover;
  box-shadow:0 16px 48px rgba(0,0,0,0.5);
}
.album-info {}
.album-title {
  font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400;
  color:var(--cream);margin-bottom:6px;
}
.album-artist {
  font-size:0.95rem;font-weight:300;color:var(--stone);margin-bottom:12px;
}
.album-desc {
  font-size:0.88rem;font-weight:300;color:rgba(245,242,237,0.5);line-height:1.7;max-width:480px;
}

/* Now playing bar */
.np-bar {
  background:rgba(245,242,237,0.04);border:1px solid rgba(245,242,237,0.06);
  border-radius:6px;padding:20px 28px;
  display:flex;align-items:center;gap:20px;
  margin-bottom:24px;
}
.np-btn {
  background:none;border:none;color:var(--stone);cursor:pointer;padding:6px;
  transition:color 0.2s;display:flex;
}
.np-btn:hover { color:var(--cream); }
.np-play {
  width:52px;height:52px;border-radius:50%;background:var(--ochre);
  color:var(--black);display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;transition:all 0.3s;flex-shrink:0;
}
.np-play:hover { background:var(--cream);transform:scale(1.05); }
.np-track-name {
  font-family:var(--serif);font-size:1.15rem;color:var(--cream);min-width:0;
}
.np-progress-wrap { flex:1;min-width:0; }
.np-progress {
  width:100%;height:3px;background:rgba(245,242,237,0.1);border-radius:3px;
  cursor:pointer;position:relative;overflow:hidden;
}
.np-fill { height:100%;background:var(--ochre);border-radius:3px;width:0%;transition:width 0.3s linear; }
.np-time {
  font-family:var(--mono);font-size:0.62rem;color:var(--stone);white-space:nowrap;
}

/* Track list */
.track {
  display:grid;grid-template-columns:32px 1fr auto;gap:16px;align-items:center;
  padding:14px 16px;border-radius:4px;cursor:pointer;transition:background 0.2s;
}
.track:hover { background:rgba(245,242,237,0.04); }
.track-n { font-family:var(--mono);font-size:0.7rem;color:var(--stone);text-align:center; }
.track-t { font-size:0.9rem;color:rgba(245,242,237,0.75); }
.track-d { font-family:var(--mono);font-size:0.68rem;color:var(--stone); }
.track.active .track-n, .track.active .track-t { color:var(--ochre); }

/* ═══ SERVICES ═══ */
.svc-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }

.svc {
  background:var(--cream);border:1px solid var(--stone-light);border-radius:5px;
  padding:36px 30px;transition:all 0.4s;position:relative;overflow:hidden;
}
.svc::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--ochre);transform:scaleX(0);transform-origin:left;transition:transform 0.4s;
}
.svc:hover { border-color:var(--ochre);transform:translateY(-4px);box-shadow:0 16px 48px rgba(20,18,17,0.06); }
.svc:hover::before { transform:scaleX(1); }
.svc-name { font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--black);margin-bottom:10px; }
.svc-desc { font-size:0.88rem;font-weight:300;color:var(--charcoal);line-height:1.7;margin-bottom:20px; }
.svc-price { font-family:var(--mono);font-size:0.78rem;color:var(--ochre-dark);margin-bottom:20px; }
.svc-link {
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--forest);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:color 0.3s;
}
.svc-link:hover { color:var(--ochre-dark); }
.svc-link svg { width:14px;height:14px;transition:transform 0.3s; }
.svc-link:hover svg { transform:translateX(4px); }

/* Service blocks */
.svc-block { margin-bottom:8px; }
.svc-block-title {
  font-family:var(--serif);font-size:1.6rem;font-weight:500;color:var(--black);margin-bottom:10px;
}
.svc-block-desc {
  font-size:0.92rem;font-weight:300;color:var(--charcoal);line-height:1.7;margin-bottom:28px;max-width:600px;
}
.svc-divider { height:1px;background:var(--stone-light);margin:40px 0; }
.svc-tiers { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px; }
.svc-tiers.three { grid-template-columns:repeat(3,1fr); }
.svc-tier {
  background:var(--cream);border:1px solid var(--stone-light);border-radius:5px;
  padding:32px 28px;transition:all 0.35s;position:relative;
}
.svc-tier:hover { border-color:var(--ochre);transform:translateY(-3px);box-shadow:0 12px 36px rgba(20,18,17,0.06); }
.svc-tier.featured {
  background:var(--forest);border-color:var(--forest);
}
.svc-tier.featured .svc-tier-name,
.svc-tier.featured .svc-tier-price { color:var(--cream); }
.svc-tier.featured .svc-tier-detail { color:rgba(245,242,237,0.65); }
.svc-tier-label {
  font-family:var(--mono);font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;
  background:var(--ochre);color:var(--black);display:inline-block;
  padding:3px 10px;border-radius:2px;margin-bottom:14px;
}
.svc-tier-name {
  font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--black);margin-bottom:6px;
}
.svc-tier-price {
  font-family:var(--mono);font-size:1rem;font-weight:500;color:var(--ochre-dark);margin-bottom:10px;
}
.svc-tier-detail {
  font-size:0.85rem;font-weight:300;color:var(--charcoal);line-height:1.65;margin-bottom:16px;
}
.svc-note {
  font-family:var(--mono);font-size:0.72rem;color:var(--stone);margin-top:16px;
}
.svc-contact {
  font-size:0.88rem;color:var(--charcoal);margin-top:16px;
}
.svc-contact a { color:var(--ochre-dark);text-decoration:none;border-bottom:1px solid var(--ochre);transition:color 0.3s; }
.svc-contact a:hover { color:var(--forest); }

/* Policies */
.policy-grid { display:flex;flex-direction:column; }
.policy-item { border-bottom:1px solid var(--stone-light);cursor:pointer; }
.policy-q {
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;font-size:0.92rem;font-weight:400;color:var(--charcoal);
}
.policy-q svg { flex-shrink:0;color:var(--stone);transition:transform 0.3s; }
.policy-item.open .policy-q svg { transform:rotate(180deg); }
.policy-a {
  max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease;
  font-size:0.85rem;font-weight:300;color:var(--charcoal);line-height:1.7;
}
.policy-item.open .policy-a { max-height:200px;padding-bottom:16px; }

@media(max-width:900px) {
  .svc-tiers, .svc-tiers.three { grid-template-columns:1fr; }
}

/* ═══ COLLABORATION ═══ */
.collab {
  background:var(--forest);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);align-items:start;
}
.collab-title {
  font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;
  color:var(--cream);line-height:1.2;margin-bottom:16px;
}
.collab-text { font-size:0.92rem;font-weight:300;color:rgba(245,242,237,0.6);line-height:1.75;margin-bottom:32px; }
.collab-contact { display:flex;flex-direction:column;gap:14px; }
.collab-contact a, .collab-contact span {
  font-family:var(--mono);font-size:0.78rem;color:rgba(245,242,237,0.5);text-decoration:none;transition:color 0.3s;
}
.collab-contact a:hover { color:var(--cream); }

.cform { display:flex;flex-direction:column;gap:16px; }
.cform-row { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.cform input, .cform textarea, .cform select {
  background:rgba(245,242,237,0.05);border:1px solid rgba(245,242,237,0.1);
  border-radius:3px;padding:14px 16px;font-family:var(--sans);font-size:0.88rem;
  color:var(--cream);outline:none;transition:border-color 0.3s;
}
.cform input:focus, .cform textarea:focus, .cform select:focus { border-color:var(--ochre); }
.cform input::placeholder, .cform textarea::placeholder { color:rgba(245,242,237,0.2); }
.cform textarea { resize:vertical;min-height:100px; }
.cform select { appearance:none;cursor:pointer; }
.cform select option { background:var(--black);color:var(--cream); }
.cform button {
  align-self:flex-start;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--black);background:var(--ochre);border:none;
  border-radius:3px;padding:15px 36px;cursor:pointer;transition:all 0.3s;
}
.cform button:hover { background:var(--cream);transform:translateY(-2px); }

/* ═══ FOOTER ═══ */
footer.araya-footer {
  background:var(--black);padding:40px clamp(28px,6vw,96px);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.footer-brand { font-family:var(--serif);font-size:1rem;color:var(--cream); }
.footer-brand em { font-style:italic;color:var(--ochre); }
.footer-copy { font-family:var(--mono);font-size:0.6rem;color:rgba(184,175,166,0.4); }
.footer-socials { display:flex;gap:16px; }
.footer-socials a { color:var(--stone);transition:color 0.3s;display:flex; }
.footer-socials a:hover { color:var(--ochre); }
.footer-socials svg { width:18px;height:18px; }

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
.reveal { opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.vis { opacity:1;transform:translateY(0); }

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px) {
  .hero { grid-template-columns:1fr;min-height:auto; }
  .hero-left { padding:100px 28px 56px; }
  .hero-right { aspect-ratio:4/3; }
  .pillars-grid { grid-template-columns:1fr; }
  .howto, .svc-grid { grid-template-columns:1fr; }
  .album-header { grid-template-columns:1fr;text-align:center; }
  .album-art { margin:0 auto; }
  .collab { grid-template-columns:1fr; }
  .np-bar { flex-wrap:wrap; }
  .cform-row { grid-template-columns:1fr; }
  .nav-links { gap:16px; }
  .nav-links a { font-size:0.6rem; }
  footer.araya-footer { flex-direction:column;text-align:center; }
}

/* ═══ WORDPRESS CONTENT ═══ */
.wp-content {
  max-width:800px;
  margin:0 auto;
  padding:120px clamp(28px,6vw,96px) 80px;
}
.wp-content h1 {
  font-family:var(--serif);font-size:clamp(2rem,3vw,3rem);font-weight:300;
  color:var(--black);margin-bottom:24px;
}
.wp-content h2 {
  font-family:var(--serif);font-size:1.6rem;font-weight:500;
  color:var(--black);margin:32px 0 12px;
}
.wp-content p {
  font-size:0.95rem;font-weight:300;line-height:1.8;color:var(--charcoal);margin-bottom:16px;
}
.wp-content a { color:var(--ochre-dark);text-decoration:none;border-bottom:1px solid var(--ochre); }
.wp-content a:hover { color:var(--forest); }
.wp-content img { max-width:100%;height:auto;border-radius:4px;margin:24px 0; }