/*
Theme Name: Give Warakorn
Theme URI: https://givewarakorn.com
Author: Give Warakorn
Description: A refined, editorial theme for Give Warakorn — interior design and consultancy. Warm ivory grounds, espresso ink, bronze accents; Cormorant Garamond with Noto Serif Thai and Sarabun.
Version: 1.7.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: givewarakorn
Tags: blog, portfolio, one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

:root{
  --ivory:#F7F4EE;
  --linen:#EDE7DB;
  --espresso:#2B241C;
  --ink:#332B22;
  --taupe:#6F6355;
  --bronze:#96784F;
  --bronze-deep:#7C6240;
  --hairline:#DCD3C3;
  --white:#FDFCF9;
  --serif-en:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serif-th:'Noto Serif Thai','Cormorant Garamond', Georgia, serif;
  --sans:'Sarabun','Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(247,244,238,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.bar{
  max-width:1320px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
  height:88px;
}
.logo, .logo a{
  font-family:var(--serif-en);
  font-weight:500; font-size:27px; letter-spacing:.04em; color:var(--espresso);
  white-space:nowrap;
}
.logo .accent{font-style:italic; color:var(--bronze);}
.logo img{max-height:56px; width:auto;}
nav.main{display:flex; gap:38px; align-items:center;}
nav.main ul{display:flex; gap:38px; align-items:center; list-style:none;}
nav.main li{position:relative;}
nav.main a{
  font-family:var(--sans); font-weight:400;
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); padding:6px 0; position:relative; display:inline-block;
}
nav.main a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--bronze); transition:width .35s ease;
}
nav.main a:hover::after, nav.main .current-menu-item > a::after{width:100%;}
nav.main .sub-menu{
  display:none; position:absolute; top:100%; left:-20px; min-width:220px;
  background:var(--white); border:1px solid var(--hairline); padding:12px 0; z-index:60;
}
nav.main li:hover > .sub-menu, nav.main li:focus-within > .sub-menu{display:block;}
nav.main .sub-menu li{display:block;}
nav.main .sub-menu a{display:block; padding:9px 22px; letter-spacing:.14em; font-size:12px;}
.menu-btn{display:none; background:none; border:1px solid var(--hairline);
  font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  padding:10px 16px; color:var(--ink); cursor:pointer;}
.m-menu{display:none; flex-direction:column; border-top:1px solid var(--hairline); background:var(--ivory);}
.m-menu ul{list-style:none;}
.m-menu a{display:block; padding:16px 40px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid var(--hairline);}
.m-menu .sub-menu a{padding-left:64px; font-size:12px;}
.m-menu.open{display:flex;}

/* ---------- hero ---------- */
.hero{position:relative; height:min(92vh,860px); min-height:560px; overflow:hidden;}
.hero > img{width:100%; height:100%; object-fit:cover;}
.hero-slides{position:absolute; inset:0;}
.hero-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04);
  transition:opacity 1.6s ease, transform 7.5s ease;
}
.hero-slide.on{opacity:1; transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:none; transform:none;}
}
.veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,24,17,.28) 0%, rgba(30,24,17,.18) 45%, rgba(30,24,17,.42) 100%);}
.hero .inner{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 24px; color:#FBF8F2;
}
.eyebrow{
  font-family:var(--sans); font-weight:400; font-size:11.5px;
  letter-spacing:.34em; text-transform:uppercase;
}
.hero .eyebrow{color:#EBE2D2;}
.hero h1{
  font-family:var(--serif-th); font-weight:500;
  font-size:clamp(34px,5vw,60px); line-height:1.35; margin:26px 0 10px;
  text-wrap:balance; max-width:900px; text-shadow:0 1px 30px rgba(20,15,8,.35);
}
.hero .en{
  font-family:var(--serif-en); font-style:italic; font-weight:400;
  font-size:clamp(19px,2.2vw,26px); color:#EFE7D8; letter-spacing:.02em;
}
.btn{
  display:inline-block; font-family:var(--sans); font-weight:400;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  padding:17px 42px; border:1px solid currentColor; color:inherit;
  background:transparent; cursor:pointer; transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.hero .btn{margin-top:44px; color:#FBF8F2;}
.hero .btn:hover{background:#FBF8F2; color:var(--espresso); border-color:#FBF8F2;}
.btn.solid{background:var(--espresso); color:var(--ivory); border-color:var(--espresso);}
.btn.solid:hover{background:var(--bronze-deep); border-color:var(--bronze-deep);}
.btn.ghost-dark{color:var(--espresso);}
.btn.ghost-dark:hover{background:var(--espresso); color:var(--ivory);}

/* ---------- shared ---------- */
section.band{padding:110px 40px;}
.wrap{max-width:1320px; margin:0 auto;}
.narrow{max-width:820px; margin:0 auto; text-align:center;}
h2.display{
  font-family:var(--serif-th); font-weight:500; color:var(--espresso);
  font-size:clamp(28px,3.4vw,42px); line-height:1.45; text-wrap:balance;
}
h2.display em, .statement em{
  font-family:var(--serif-en); font-style:italic; font-weight:500; color:var(--bronze);
}
.lede{color:var(--taupe); max-width:62ch; margin:22px auto 0;}
.rule{width:56px; height:1px; background:var(--bronze); margin:30px auto 0; border:0;}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px;}
.sec-head .eyebrow{color:var(--bronze-deep); display:block; margin-bottom:14px;}
.text-link{
  font-family:var(--sans); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--espresso); border-bottom:1px solid var(--bronze); padding-bottom:5px; white-space:nowrap;
  transition:color .3s ease;
}
.text-link:hover{color:var(--bronze-deep);}

/* ---------- philosophy ---------- */
.philosophy{padding:120px 40px;}
.statement{
  font-family:var(--serif-th); font-weight:400; color:var(--espresso);
  font-size:clamp(26px,3vw,38px); line-height:1.6; text-wrap:balance;
}

/* ---------- portfolio ---------- */
.work{padding:0 40px 110px;}
.grid-work{display:grid; grid-template-columns:7fr 5fr; gap:56px 48px; align-items:start;}
.proj{display:block;}
.frame{overflow:hidden; background:var(--linen);}
.frame img{transition:transform 1.1s cubic-bezier(.2,.6,.2,1); width:100%; height:100%; object-fit:cover;}
.proj:hover .frame img{transform:scale(1.045);}
.proj .cap{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:20px;}
.proj h3{font-family:var(--serif-en); font-weight:500; font-size:22px; letter-spacing:.02em; color:var(--espresso);}
.proj .tag{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); font-weight:400;}
.proj.tall .frame{aspect-ratio:4/4.4;}
.proj.wide .frame{aspect-ratio:3/2;}
.stack{display:flex; flex-direction:column; gap:56px;}
.work-foot{text-align:center; margin-top:72px;}

/* ---------- journal ---------- */
.journal{background:var(--white); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
.grid-journal{display:grid; grid-template-columns:repeat(3,1fr); gap:48px;}
.post-card .frame{aspect-ratio:4/3;}
.post-card .meta{margin-top:20px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--bronze-deep); font-weight:400;}
.post-card h3{
  font-family:var(--serif-th); font-weight:500; font-size:21px; line-height:1.55;
  color:var(--espresso); margin-top:10px; text-wrap:balance;
}
.post-card p{color:var(--taupe); font-size:15.5px; margin-top:10px;}
.cats{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:72px;}
.cats a{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  border:1px solid var(--hairline); padding:11px 22px; color:var(--taupe);
  transition:border-color .3s ease, color .3s ease;
}
.cats a:hover{border-color:var(--bronze); color:var(--bronze-deep);}

/* ---------- about ---------- */
.about{background:var(--linen);}
.grid-about{display:grid; grid-template-columns:6fr 5fr; gap:80px; align-items:center;}
.grid-about .frame{aspect-ratio:4/3.4;}
.about .eyebrow{color:var(--bronze-deep);}
.about h2{margin-top:18px;}
.about p{color:var(--taupe); margin-top:24px; max-width:54ch;}
.about .en-line{
  font-family:var(--serif-en); font-style:italic; font-size:21px; color:var(--espresso);
  margin-top:26px;
}
.about .btn{margin-top:40px;}

/* ---------- press strip ---------- */
.press{padding:64px 40px;}
.press .wrap{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:22px 64px;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:34px 0;
}
.press a{
  font-family:var(--sans); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--taupe); font-weight:400; transition:color .3s ease;
}
.press a:hover{color:var(--espresso);}

/* ---------- CTA ---------- */
.cta{position:relative; overflow:hidden;}
.cta > img{width:100%; height:620px; object-fit:cover;}
.cta .veil{background:rgba(28,22,15,.55);}
.cta .inner{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; color:#F8F4EC; padding:0 24px;
}
.cta h2{
  font-family:var(--serif-th); font-weight:500; font-size:clamp(28px,3.6vw,44px);
  line-height:1.4; max-width:760px; text-wrap:balance; margin-top:24px;
}
.cta p{margin-top:18px; max-width:52ch; color:#E5DCCB;}
.cta .eyebrow{color:#D8CBB4;}
.cta .btn{margin-top:42px; color:#F8F4EC;}
.cta .btn:hover{background:#F8F4EC; color:var(--espresso); border-color:#F8F4EC;}

/* ---------- footer ---------- */
footer.site{background:var(--espresso); color:#CFC5B4; padding:96px 40px 48px;}
footer.site .wrap{max-width:1320px;}
.f-logo{font-family:var(--serif-en); font-weight:500; font-size:30px; color:#F3EDE1; letter-spacing:.04em;}
.f-logo .accent{font-style:italic; color:#C9AE85;}
.f-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.4fr; gap:64px; margin-top:64px;}
.f-grid h4{
  font-family:var(--sans); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:#9C8F7B; font-weight:500; margin-bottom:22px;
}
.f-grid a, .f-grid p{display:block; font-size:14.5px; color:#CFC5B4; margin-bottom:12px; font-weight:300;}
.f-grid ul{list-style:none;}
.f-grid a:hover{color:#F3EDE1;}
.f-tag{font-family:var(--serif-en); font-style:italic; font-size:18px; color:#B8AB95; margin-top:16px; max-width:30ch; line-height:1.6;}
.news input[type="email"]{
  width:100%; background:transparent; border:1px solid #55493A; color:#F3EDE1;
  font-family:var(--sans); font-weight:300; font-size:14px; padding:14px 16px; margin-bottom:14px;
}
.news input::placeholder{color:#8D806C;}
.news .btn, .news button{color:#E9E1D2; font-size:11px; padding:14px 30px; border:1px solid #6A5C49; background:transparent; font-family:var(--sans); letter-spacing:.26em; text-transform:uppercase; cursor:pointer; transition:background .3s ease, color .3s ease;}
.news .btn:hover, .news button:hover{background:#F3EDE1; color:var(--espresso); border-color:#F3EDE1;}
.f-base{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  border-top:1px solid #453A2D; margin-top:72px; padding-top:32px;
  font-size:12.5px; color:#9C8F7B;
}
.socials{display:flex; gap:26px;}
.socials a{font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:#B8AB95;}
.socials a:hover{color:#F3EDE1;}

/* ---------- inner pages & posts ---------- */
.page-hero{padding:96px 40px 64px; text-align:center; border-bottom:1px solid var(--hairline);}
.page-hero .eyebrow{color:var(--bronze-deep);}
.page-hero h1{
  font-family:var(--serif-th); font-weight:500; color:var(--espresso);
  font-size:clamp(30px,4vw,48px); line-height:1.4; margin-top:18px; text-wrap:balance;
}
.page-hero .meta{margin-top:18px; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--taupe);}
.content-area{padding:80px 40px 110px;}
.entry{max-width:760px; margin:0 auto;}
.entry-feature{max-width:1080px; margin:0 auto 64px;}
.entry-content p{margin-bottom:1.6em; color:var(--ink);}
.entry-content h2, .entry-content h3{
  font-family:var(--serif-th); font-weight:500; color:var(--espresso);
  line-height:1.45; margin:2em 0 .8em; text-wrap:balance;
}
.entry-content h2{font-size:30px;}
.entry-content h3{font-size:24px;}
.entry-content a{border-bottom:1px solid var(--bronze); transition:color .3s ease;}
.entry-content a:hover{color:var(--bronze-deep);}
.entry-content ul, .entry-content ol{margin:0 0 1.6em 1.4em;}
.entry-content li{margin-bottom:.5em;}
.entry-content blockquote{
  font-family:var(--serif-th); font-size:22px; line-height:1.7; color:var(--espresso);
  border-left:1px solid var(--bronze); padding-left:28px; margin:2em 0;
}
.entry-content img{margin:2em auto;}
.entry-content .wp-caption-text, .entry-content figcaption{
  font-size:13px; color:var(--taupe); text-align:center; margin-top:10px;
}
.alignwide{max-width:1080px; margin-left:auto; margin-right:auto;}
.alignfull{width:100vw; max-width:100vw; margin-left:calc(50% - 50vw);}
.post-nav{max-width:760px; margin:64px auto 0; display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--hairline); padding-top:32px;}
.archive-grid{max-width:1320px; margin:0 auto;}
.pagination{display:flex; gap:18px; justify-content:center; margin-top:72px;}
.pagination .page-numbers{
  font-family:var(--sans); font-size:12px; letter-spacing:.2em; padding:10px 16px;
  border:1px solid var(--hairline); color:var(--taupe);
}
.pagination .page-numbers.current, .pagination .page-numbers:hover{border-color:var(--bronze); color:var(--bronze-deep);}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:none;}
.no-js .reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .frame img{transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .bar{padding:0 24px;}
  nav.main{display:none;}
  .menu-btn{display:block;}
  section.band, .philosophy, .content-area{padding-left:24px; padding-right:24px;}
  section.band{padding-top:80px; padding-bottom:80px;}
  .work{padding:0 24px 80px;}
  .grid-work{grid-template-columns:1fr; gap:48px;}
  .grid-journal{grid-template-columns:1fr; gap:56px;}
  .grid-about{grid-template-columns:1fr; gap:48px;}
  .f-grid{grid-template-columns:1fr 1fr; gap:48px;}
  .cta > img{height:520px;}
  .press{padding:48px 24px;}
}
@media (max-width:640px){
  .f-grid{grid-template-columns:1fr;}
  .bar{height:72px;}
  .sec-head{flex-direction:column; align-items:flex-start;}
}

/* ---------- the journey (about) ---------- */
.jny-hero{position:relative; height:min(80vh,720px); min-height:480px; overflow:hidden;}
.jny-hero > img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.jny-hero .inner{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 24px; color:#FBF8F2;
}
.jny-hero .eyebrow{color:#EBE2D2;}
.jny-hero h1{
  font-family:var(--serif-th); font-weight:500;
  font-size:clamp(32px,4.5vw,54px); line-height:1.4; margin:24px 0 10px;
  text-wrap:balance; text-shadow:0 1px 30px rgba(20,15,8,.35);
}
.jny-hero .en{
  font-family:var(--serif-en); font-style:italic; font-weight:400;
  font-size:clamp(18px,2vw,24px); color:#EFE7D8;
}
.jny-chapters{padding:20px 40px 40px;}
.jny-chapter{
  display:grid; grid-template-columns:6fr 5fr; gap:72px; align-items:center;
  padding:56px 0;
}
.jny-chapter.alt{grid-template-columns:5fr 6fr;}
.jny-chapter.alt .jny-media{order:2;}
.jny-chapter.alt .jny-text{order:1; text-align:right;}
.jny-media.frame{aspect-ratio:4/3;}
.jny-year{
  font-family:var(--serif-en); font-style:italic; font-size:20px; color:var(--bronze);
  display:block;
}
.jny-text h2{
  font-family:var(--sans); font-weight:400; font-size:14px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--taupe); margin-top:14px;
}
.jny-text h3{
  font-family:var(--serif-th); font-weight:500; color:var(--espresso);
  font-size:clamp(24px,2.6vw,34px); line-height:1.5; margin-top:12px; text-wrap:balance;
}
.jny-text p{color:var(--taupe); margin-top:20px; max-width:52ch;}
.jny-chapter.alt .jny-text p{margin-left:auto;}
.jny-quote{background:var(--linen);}
.jny-timeline{padding-top:90px; padding-bottom:90px;}
.jny-line{
  display:flex; justify-content:space-between; gap:24px; position:relative;
  border-top:1px solid var(--hairline); padding-top:34px; max-width:900px; margin:0 auto;
}
.jny-stop{text-align:center; position:relative; flex:1;}
.jny-dot{
  position:absolute; top:-38px; left:50%; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--bronze);
}
.jny-stop-year{
  display:block; font-family:var(--serif-en); font-size:26px; color:var(--espresso);
}
.jny-stop-label{
  display:block; margin-top:6px; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--taupe);
}
@media (max-width:1080px){
  .jny-chapters{padding:10px 24px 20px;}
  .jny-chapter, .jny-chapter.alt{grid-template-columns:1fr; gap:32px; padding:40px 0;}
  .jny-chapter.alt .jny-media{order:1;}
  .jny-chapter.alt .jny-text{order:2; text-align:left;}
  .jny-chapter.alt .jny-text p{margin-left:0;}
  .jny-line{flex-direction:column; gap:40px; border-top:0; border-left:1px solid var(--hairline); padding-top:0; padding-left:34px; max-width:none;}
  .jny-stop{text-align:left;}
  .jny-dot{top:8px; left:-38px; transform:none;}
}

/* ---------- journey v1.5 additions ---------- */
.jny-media.frame.portrait{aspect-ratio:3/4; max-width:520px; justify-self:center;}
.jny-awards{background:var(--white); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
.jny-award-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 48px;}
.jny-award{border-top:1px solid var(--hairline); padding-top:22px;}
.jny-award strong{
  display:block; font-family:var(--serif-en); font-weight:500; font-size:19px;
  color:var(--espresso); line-height:1.4;
}
.jny-award span{
  display:block; margin-top:8px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--taupe); font-weight:400; line-height:1.7;
}
.jny-awards .press .wrap{flex-wrap:wrap; padding:0; gap:18px 44px;}
@media (max-width:1080px){
  .jny-award-grid{grid-template-columns:1fr; gap:28px;}
  .jny-media.frame.portrait{max-width:none;}
}

/* ---------- journey v1.7 additions ---------- */
.jny-signature .sec-head{margin-bottom:52px;}
.jny-sig-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:48px;}
.jny-sig{border-top:1px solid var(--hairline); padding-top:26px;}
.jny-sig-no{
  display:block; font-family:var(--serif-en); font-size:13px; letter-spacing:.28em;
  color:var(--bronze); margin-bottom:14px;}
.jny-sig h4{
  font-family:var(--serif-en); font-weight:500; font-size:24px; line-height:1.3;
  color:var(--espresso); margin:0 0 12px;}
.jny-sig p{
  font-family:var(--serif-th); font-size:16px; line-height:2.05; color:var(--taupe); margin:0;}

.jny-press{background:var(--linen);}
.jny-press .sec-head{margin-bottom:52px;}
.jny-sheets{display:grid; grid-template-columns:repeat(2,1fr); gap:56px; margin-bottom:16px;}
.jny-sheet{margin:0;}
.jny-sheet img{
  display:block; width:100%; height:auto; background:var(--white);
  box-shadow:0 22px 60px rgba(43,36,28,.13);}
.jny-sheet figcaption{padding-top:22px; border-top:1px solid var(--hairline); margin-top:26px;}
.jny-sheet figcaption strong{
  display:block; font-family:var(--serif-en); font-weight:500; font-size:19px;
  color:var(--espresso); line-height:1.4;}
.jny-sheet figcaption span{
  display:block; margin-top:8px; font-family:var(--serif-th); font-size:14px;
  line-height:1.9; color:var(--taupe);}
.jny-press .press .wrap{border-top:1px solid var(--hairline); padding-top:34px;}

@media (max-width:1080px){
  .jny-sig-grid{grid-template-columns:1fr; gap:32px;}
  .jny-sheets{grid-template-columns:1fr; gap:44px;}
}