/*
Theme Name: Design By J
Theme URI: https://designbyj.com
Author: Design By J
Description: Custom one-page theme for Design By J, a residential home design studio.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: designbyj
*/

:root{
  --plaster: #F0EAE0;
  --plaster-deep: #E4D8C6;
  --ink: #1E1B17;
  --ink-soft: #4A4038;
  --brass: #B5652B;
  --brass-soft: #D99A56;
  --sage: #2F5D4C;
  --line: #D6C7AE;
  --white: #FFFDFA;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--plaster);
  color: var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3,.wordmark{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
}

a{ color:inherit; text-decoration:none; }

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

.wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(243,239,231,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:22px 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{ font-size:22px; letter-spacing:0; }
.wordmark .dot{ color:var(--brass); }
.nav-links{ display:flex; gap:40px; font-size:14px; letter-spacing:0.02em; }
.nav-links a{ position:relative; padding-bottom:4px; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--brass); transition:width .3s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  border:1px solid var(--ink); padding:9px 20px; border-radius:2px;
  font-size:13px; letter-spacing:0.03em; transition: all .25s ease;
}
.nav-cta:hover{ background:var(--ink); color:var(--white); }
.burger{ display:none; cursor:pointer; background:none; border:none; font-size:20px; }

/* ---------- HERO ---------- */
.hero{
  padding:190px 40px 120px;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:60px; align-items:center;
  max-width:1180px; margin:0 auto; position:relative;
}
.eyebrow{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--sage); margin-bottom:22px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--sage); }
.hero h1{
  font-size:clamp(40px, 5.2vw, 64px); line-height:1.06; font-weight:500;
  color:var(--ink);
}
.hero h1 em{ font-style:italic; color:var(--brass); font-weight:400; }
.hero p.lede{
  margin-top:26px; font-size:17px; color:var(--ink-soft); max-width:440px;
}
.hero-ctas{ margin-top:38px; display:flex; gap:16px; align-items:center; }
.btn-primary{
  background:var(--ink); color:var(--white); padding:14px 28px; border-radius:2px;
  font-size:14px; letter-spacing:0.03em; display:inline-block;
  transition: transform .25s ease, background .25s ease;
}
.btn-primary:hover{ background:var(--brass); transform:translateY(-2px); }
.btn-ghost{ font-size:14px; border-bottom:1px solid var(--ink); padding-bottom:2px; }

.hero-art{ position:relative; aspect-ratio:1/1.05; }
.hero-art svg{ width:100%; height:100%; }
.hero-art img{ width:100%; height:100%; object-fit:cover; border-radius:3px; }

/* ---------- MARQUEE / STRIP ---------- */
.strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0; overflow:hidden; background:var(--plaster-deep);
}
.strip-track{
  display:flex; gap:64px; white-space:nowrap; width:max-content;
  animation: scroll 32s linear infinite;
  font-family:'Fraunces', serif; font-size:15px; color:var(--ink-soft); font-style:italic;
}
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- SECTION SHARED ---------- */
section{ padding:110px 0; }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head .eyebrow{ margin-bottom:18px; }
.section-head h2{ font-size:clamp(30px,3.4vw,42px); font-weight:500; }
.section-head p{ margin-top:18px; color:var(--ink-soft); font-size:16px; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- PHILOSOPHY ---------- */
.philosophy{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:70px; align-items:start; }
.philosophy .big-quote{
  font-family:'Fraunces', serif; font-size:clamp(24px,2.6vw,32px); font-weight:400;
  line-height:1.35; color:var(--ink);
}
.philosophy .big-quote em{ font-style:italic; color:var(--brass); }
.philosophy-list{ margin-top:36px; display:flex; flex-direction:column; gap:22px; }
.philosophy-item{ display:flex; gap:18px; align-items:flex-start; }
.philosophy-item .num{
  font-family:'Fraunces',serif; font-style:italic; color:var(--brass-soft); font-size:20px; min-width:28px;
}
.philosophy-item p{ color:var(--ink-soft); font-size:15px; }
.philosophy-item strong{ color:var(--ink); font-weight:500; display:block; margin-bottom:4px; font-family:'Fraunces',serif; font-size:17px;}

/* ---------- SERVICES ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card{
  background:var(--plaster); padding:44px 36px; transition: background .3s ease;
}
.service-card:hover{ background:var(--white); }
.service-card .tag{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage); }
.service-card h3{ margin-top:16px; font-size:24px; font-weight:500; }
.service-card p{ margin-top:14px; color:var(--ink-soft); font-size:14.5px; }
.service-card .price{ margin-top:24px; font-family:'Fraunces',serif; font-style:italic; color:var(--brass); font-size:17px; }

/* ---------- PORTFOLIO ---------- */
.portfolio-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:50px; flex-wrap:wrap; gap:20px; }
.portfolio-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows:180px; gap:14px;
}
.p-tile{
  position:relative; border-radius:3px; overflow:hidden; display:flex; align-items:flex-end;
  padding:20px; color:var(--white); cursor:default;
}
.p-tile::before{ content:''; position:absolute; inset:0; opacity:0.14; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 26px); }
.p-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.p-tile .tile-label{ position:relative; font-family:'Fraunces',serif; font-style:italic; font-size:16px; z-index:2; }
.p-tile .tile-tag{ position:absolute; top:16px; left:20px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.85; z-index:2; }
.p-tile.large{ grid-column:span 3; grid-row:span 2; }
.p-tile.med{ grid-column:span 3; grid-row:span 1; }
.p-tile.small{ grid-column:span 2; grid-row:span 1; }
.t1{ background:linear-gradient(135deg,#8A9182,#5F6A56); }
.t2{ background:linear-gradient(135deg,#C9A876,#A9793F); }
.t3{ background:linear-gradient(135deg,#B7A38E,#8A7660); }
.t4{ background:linear-gradient(135deg,#7C8A9A,#54606E); }
.p-tile.upload{
  background:var(--white); border:1px dashed var(--brass-soft); color:var(--ink-soft);
  align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:8px;
}
.p-tile.upload::before{ display:none; }
.p-tile.upload .tile-label{ color:var(--ink-soft); font-style:normal; font-family:'Work Sans',sans-serif; font-size:13px; }

/* ---------- PROCESS ---------- */
.process{ background:var(--ink); color:var(--plaster); border-radius:4px; padding:80px 60px; }
.process .section-head p, .process .section-head .eyebrow{ color:#C9C2B4; }
.process .section-head h2{ color:var(--white); }
.process-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:20px; }
.process-step .step-mark{
  font-family:'Fraunces',serif; font-style:italic; color:var(--brass-soft); font-size:32px;
}
.process-step h3{ color:var(--white); font-size:19px; margin-top:14px; font-weight:500; }
.process-step p{ color:#B8B1A2; font-size:14px; margin-top:10px; }

/* ---------- TESTIMONIAL ---------- */
.testimonial{ text-align:center; max-width:760px; margin:0 auto; padding:100px 40px; }
.testimonial blockquote{
  font-family:'Fraunces',serif; font-weight:400; font-size:clamp(22px,3vw,30px); line-height:1.5;
}
.testimonial blockquote em{ font-style:italic; color:var(--brass); }
.testimonial cite{ display:block; margin-top:28px; font-style:normal; font-size:14px; color:var(--ink-soft); letter-spacing:0.02em; }

/* ---------- CONTACT / CTA ---------- */
.cta-block{
  background:var(--plaster-deep); border:1px solid var(--line); border-radius:4px;
  padding:70px 60px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;
}
.cta-block h2{ font-size:clamp(28px,3.2vw,38px); }
.cta-block p{ margin-top:16px; color:var(--ink-soft); max-width:420px; }
.cta-block form{ display:flex; flex-direction:column; gap:14px; }
.cta-block input, .cta-block textarea{
  background:var(--white); border:1px solid var(--line); border-radius:2px; padding:14px 16px;
  font-family:'Work Sans',sans-serif; font-size:14px; color:var(--ink); outline:none; width:100%;
}
.cta-block input:focus, .cta-block textarea:focus{ border-color:var(--brass); }
.cta-block textarea{ min-height:90px; resize:vertical; }
.submit-btn{
  background:var(--ink); color:var(--white); padding:14px; border:none; border-radius:2px;
  font-family:'Work Sans',sans-serif; font-size:14px; letter-spacing:0.03em; cursor:pointer;
  transition:background .25s ease;
}
.submit-btn:hover{ background:var(--brass); }
.form-notice{ padding:14px 16px; border-radius:2px; font-size:14px; margin-bottom:14px; }
.form-notice.success{ background:#E7ECE3; color:#4A5940; border:1px solid var(--sage); }
.form-notice.error{ background:#F3E4DE; color:#8A4A32; border:1px solid #C97C5D; }

/* ---------- STUDIO / GALLERY PAGE ---------- */
.studio-hero{ padding:140px 40px 36px; max-width:640px; margin:0 auto; }
.studio-hero h1{ font-size:clamp(22px,2.6vw,28px); line-height:1.3; font-weight:400; }
.studio-hero h1 em{ font-style:italic; color:var(--brass); font-weight:400; }
.studio-hero p{ margin-top:12px; font-size:14px; color:var(--ink-soft); max-width:480px; font-weight:300; }

.gallery-section{ padding:24px 0 110px; }
.gallery-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:300px; gap:3px; }
.gallery-tile{ position:relative; overflow:hidden; cursor:pointer; grid-column:span 2; grid-row:span 1; }
.gallery-tile.tall{ grid-row:span 2; }
.gallery-tile.wide{ grid-column:span 4; }
.gallery-tile .tile-surface{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:var(--white);
  background-size:cover; background-position:center;
}
.gallery-tile .tile-surface::before{
  content:''; position:absolute; inset:0; opacity:0.16;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 26px);
}
.g1{ background:linear-gradient(145deg,#B7A38E,#8A7660); }
.g2{ background:linear-gradient(145deg,#8A9182,#5F6A56); }
.g3{ background:linear-gradient(145deg,#C9A876,#A9793F); }
.g4{ background:linear-gradient(145deg,#7C8A9A,#54606E); }
.g5{ background:linear-gradient(145deg,#A98F8A,#7A5F5A); }
.g6{ background:linear-gradient(145deg,#9AA184,#6C7358); }

.tile-caption{ position:relative; z-index:2; font-family:'Fraunces',serif; font-style:italic; font-size:16px; order:1; transition:opacity .2s ease; }
.tile-tag{ position:relative; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; z-index:2; order:2; margin-top:4px; transition:opacity .2s ease; }
.gallery-tile:hover .tile-caption,
.gallery-tile:hover .tile-tag,
.gallery-tile.is-open .tile-caption,
.gallery-tile.is-open .tile-tag{ opacity:0; }

/* Reveal panel: hover on desktop, click/tap on mobile via .is-open */
.tile-reveal{
  position:absolute; inset:0; background:rgba(43,38,32,0.97);
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.gallery-tile:hover .tile-reveal,
.gallery-tile.is-open .tile-reveal{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.tile-reveal .reveal-eyebrow{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:8px; }
.tile-reveal h4{ font-family:'Fraunces',serif; font-weight:500; font-size:18px; color:var(--white); margin-bottom:8px; }
.tile-reveal p{ font-size:13.5px; color:#E4DCCE; line-height:1.5; }

.tap-hint{
  position:absolute; top:16px; right:16px; z-index:2; font-size:11px; color:var(--white);
  background:rgba(0,0,0,0.28); padding:5px 9px; border-radius:20px; letter-spacing:0.03em;
}
@media (min-width:861px){ .tap-hint{ display:none; } }

.studio-copyright{
  max-width:1180px; margin:10px auto 0; padding:28px 40px 60px;
  font-size:13px; color:var(--ink-soft); border-top:1px solid var(--line);
}

/* ---------- BLOG PAGE ---------- */
.blog-hero{ padding:150px 40px 50px; max-width:640px; margin:0 auto; }
.blog-hero h1{ font-size:clamp(28px,3.4vw,38px); line-height:1.2; font-weight:500; }
.blog-hero h1 em{ font-style:italic; color:var(--brass); font-weight:400; }
.blog-hero p{ margin-top:14px; font-size:15px; color:var(--ink-soft); max-width:480px; }

.post-list{ padding:20px 0 60px; display:flex; flex-direction:column; gap:0; }

.post-row{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap:70px; align-items:center;
  padding:70px 0; border-bottom:1px solid var(--line);
}
.post-row:last-child{ border-bottom:none; }

/* alternate: even rows flip image to the right */
.post-row:nth-child(even){ direction:rtl; }
.post-row:nth-child(even) > *{ direction:ltr; }

.post-media{ position:relative; aspect-ratio:4/3.1; overflow:hidden; border-radius:2px; }
.post-media img, .post-media .fauxphoto{ width:100%; height:100%; object-fit:cover; }
.p1{ background:linear-gradient(150deg,#D99A56,#B5652B); }
.p2{ background:linear-gradient(150deg,#8A9182,#2F5D4C); }
.p3{ background:linear-gradient(150deg,#B7A38E,#8A7660); }
.p4{ background:linear-gradient(150deg,#7C8A9A,#54606E); }

.post-body .tag-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.post-category{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage); }
.post-date{ font-size:12px; color:var(--ink-soft); }
.post-dot{ width:3px; height:3px; border-radius:50%; background:var(--line); }

.post-body h2{ font-size:clamp(22px,2.6vw,30px); font-weight:500; line-height:1.25; }
.post-body h2 em{ font-style:italic; color:var(--brass); font-weight:400; }
.post-body .excerpt{ margin-top:16px; font-size:15px; color:var(--ink-soft); max-width:440px; }

.post-meta-row{ margin-top:26px; display:flex; align-items:center; gap:22px; }
.read-more{ font-size:13.5px; border-bottom:1px solid var(--ink); padding-bottom:2px; transition:color .2s ease, border-color .2s ease; }
.post-row:hover .read-more{ color:var(--brass); border-color:var(--brass); }

.like-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft);
  border:1px solid var(--line); padding:6px 12px; border-radius:20px; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.like-chip:hover, .like-chip.is-liked{ border-color:var(--brass-soft); color:var(--brass); }
.like-chip svg{ width:13px; height:13px; }

.blog-pagination{ padding:0 0 100px; display:flex; gap:10px; font-size:14px; }
.blog-pagination .page-numbers{ padding:6px 12px; border:1px solid var(--line); border-radius:2px; color:var(--ink-soft); }
.blog-pagination .page-numbers.current{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* ---------- FOOTER ---------- */
footer{ padding:50px 0 40px; border-top:1px solid var(--line); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.footer-links{ display:flex; gap:28px; font-size:13px; color:var(--ink-soft); }
.footer-note{ font-size:13px; color:var(--ink-soft); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .nav-links, .nav-cta{ display:none; }
  .burger{ display:block; }
  .hero{ grid-template-columns:1fr; padding-top:150px; }
  .hero-art{ order:-1; max-width:300px; margin:0 auto 20px; }
  .philosophy{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .p-tile.large{ grid-column:span 2; grid-row:span 2; }
  .p-tile.med{ grid-column:span 2; }
  .p-tile.small{ grid-column:span 1; }
  .process-steps{ grid-template-columns:1fr 1fr; }
  .cta-block{ grid-template-columns:1fr; padding:44px 28px; }
  .wrap{ padding:0 22px; }
  section{ padding:70px 0; }

  .studio-hero{ padding:120px 22px 36px; max-width:100%; }
  .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:240px; gap:2px; }
  .gallery-tile{ grid-column:span 2 !important; grid-row:span 1 !important; }
  .gallery-tile.tall{ grid-row:span 1; }
  .studio-copyright{ padding-left:22px; padding-right:22px; }

  .blog-hero{ padding:120px 22px 36px; max-width:100%; }
  .post-row, .post-row:nth-child(even){ grid-template-columns:1fr; gap:26px; direction:ltr; padding:44px 22px; }
  .post-row:last-child{ padding-bottom:44px; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; }
  .strip-track{ animation:none; }
}