/* ============================================================
   DAAISTUDIO — Shared Project Page Stylesheet
   Used by: project-01 through project-10
   To change something on ALL project pages, edit here only.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f7f6f4;--ink:#111111;--navy:#7B6944;--muted:#888;--line:rgba(17,17,17,0.1);--sans:'Manrope',sans-serif;--mono:'DM Mono',monospace;--cover-bg:linear-gradient(135deg,#1a1a1a,#3a3a3a)}
html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;cursor:none}

/* --- Custom Cursor --- */
#cur{position:fixed;width:10px;height:10px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
#cur-r{position:fixed;width:38px;height:38px;border:1px solid rgba(17,17,17,.35);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s}
@media(hover:none){#cur,#cur-r{display:none}body{cursor:auto}a,button{cursor:pointer}}

/* --- Header --- */
header{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:20px 40px;background:rgba(247,246,244,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.logo-mark{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:20px;height:20px}.logo-mark span{display:block;border-radius:1px}.logo-mark span:nth-child(1){background:var(--navy)}.logo-mark span:nth-child(2){background:var(--ink)}.logo-mark span:nth-child(3){background:var(--ink)}.logo-mark span:nth-child(4){background:var(--ink);opacity:.25}
.logo-name{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:block}.logo-sub{font-size:8px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block;margin-top:2px;line-height:1}
.hdr-right{display:flex;align-items:center;gap:20px}.lang-btn{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid var(--line);padding:7px 14px;cursor:pointer;transition:background .2s,color .2s}.lang-btn:hover{background:var(--ink);color:var(--bg)}
.burger{display:flex;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:4px}.burger span{display:block;height:1px;background:var(--ink)}.burger span:nth-child(1){width:26px}.burger span:nth-child(2){width:18px}

/* --- Menu Overlay --- */
.menu-overlay{position:fixed;inset:0;background:var(--bg);z-index:300;transform:translateY(-100%);transition:transform .6s cubic-bezier(.76,0,.24,1);overflow:hidden}.menu-overlay.is-open{transform:translateY(0)}
.menu-overlay-inner{display:grid;grid-template-columns:1fr 1fr;height:100%;padding:100px 56px 56px;gap:80px}
.menu-nav ul{list-style:none;display:flex;flex-direction:column;gap:4px}.menu-nav li{overflow:hidden}
.menu-link{font-family:var(--sans);font-size:clamp(40px,7vw,88px);font-weight:300;letter-spacing:-.03em;color:var(--ink);text-decoration:none;display:block;line-height:1.1;transform:translateY(100%);opacity:0}.menu-link:hover{color:var(--navy)}
.menu-overlay.is-open .menu-link{animation:mlIn .7s cubic-bezier(.76,0,.24,1) forwards}
.menu-nav li:nth-child(1) .menu-link{animation-delay:.05s}.menu-nav li:nth-child(2) .menu-link{animation-delay:.1s}.menu-nav li:nth-child(3) .menu-link{animation-delay:.15s}.menu-nav li:nth-child(4) .menu-link{animation-delay:.2s}.menu-nav li:nth-child(5) .menu-link{animation-delay:.25s}
@keyframes mlIn{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.menu-right{display:flex;flex-direction:column;justify-content:space-between;padding-top:20px;opacity:0;transform:translateY(20px);transition:opacity .5s ease .35s,transform .5s ease .35s}.menu-overlay.is-open .menu-right{opacity:1;transform:translateY(0)}
.menu-info a,.menu-info p{font-family:var(--sans);font-size:13px;font-weight:300;color:var(--ink);text-decoration:none;line-height:2.2;display:block}.menu-info a:hover{color:var(--navy);text-decoration:underline}
.menu-desc{font-family:var(--sans);font-size:13px;font-weight:300;color:var(--muted);line-height:1.7;max-width:320px}.menu-visuals{display:flex;gap:12px;margin-top:24px}.menu-vis-card{width:130px;height:90px;border-radius:2px;flex-shrink:0}
.menu-close{position:fixed;top:20px;right:40px;z-index:310;background:none;border:none;cursor:pointer;font-size:28px;color:var(--ink);width:44px;height:44px;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease .3s}.menu-close.visible{opacity:1;pointer-events:auto}

/* --- Breadcrumb --- */
.breadcrumb{padding:100px 48px 0;max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:12px}
.bc-link{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}.bc-link:hover{color:var(--ink)}.bc-sep{font-family:var(--mono);font-size:10px;color:rgba(17,17,17,.2)}.bc-cur{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}

/* --- Project Hero --- */
.proj-hero{padding:28px 48px 64px;max-width:1200px;margin:0 auto}.proj-meta-top{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.proj-num{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted)}.proj-cat{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);padding:5px 12px;border:1px solid rgba(123,105,68,.25);border-radius:2px}
.proj-title{font-family:var(--sans);font-size:clamp(44px,7vw,96px);font-weight:300;line-height:1.02;letter-spacing:-.03em;margin-bottom:44px}
.proj-info-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.proj-info-cell{background:var(--bg);padding:22px 26px}
.pil{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:block}.piv{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--ink);line-height:1.5}.piv a{color:var(--navy);text-decoration:none;font-size:13px}.piv a:hover{text-decoration:underline}

/* --- Concept Notice (project-06 only, harmless elsewhere) --- */
.concept-notice{max-width:1200px;margin:0 auto;padding:0 48px 0;display:flex;align-items:center;gap:14px;margin-bottom:-20px}
.concept-badge{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#6b1a8a;padding:6px 14px;border:1px solid rgba(107,26,138,.3);border-radius:2px;white-space:nowrap}.concept-note{font-family:var(--sans);font-size:12px;font-weight:300;color:var(--muted);line-height:1.5}

/* --- Cover Image --- */
.proj-cover{width:100%;height:62vh;min-height:380px;overflow:hidden;position:relative}
.proj-cover-img-wrap{width:100%;height:100%;background:var(--cover-bg);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.proj-cover-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}.proj-cover-img-wrap span{font-family:var(--mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.25);position:relative;z-index:1}

/* --- Project Body --- */
.proj-body{max-width:1200px;margin:0 auto;padding:0 48px}
.sec-label{font-family:var(--mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;display:flex;align-items:center;gap:12px}.sec-label::before{content:'';display:block;width:22px;height:1px;background:var(--navy)}

/* --- Overview --- */
.proj-overview{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:80px 0;border-bottom:1px solid var(--line);align-items:start}
.proj-ov-text{font-family:var(--sans);font-size:16px;font-weight:300;line-height:1.85;color:var(--ink)}.proj-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.proj-tag{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:7px 14px;border:1px solid var(--line);border-radius:2px}

/* --- Scope List --- */
.process-list{display:flex;flex-direction:column}.process-item{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line);align-items:start}
.pn{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--muted);padding-top:3px}.pc h4{font-family:var(--sans);font-size:14px;font-weight:500;margin-bottom:5px;letter-spacing:-.01em}.pc p{font-family:var(--sans);font-size:12px;font-weight:300;color:var(--muted);line-height:1.8}

/* --- Challenge / Solution --- */
.proj-challenge{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:80px 0;border-bottom:1px solid var(--line)}.cb h3{font-family:var(--sans);font-size:clamp(20px,2.2vw,28px);font-weight:400;letter-spacing:-.015em;margin-bottom:16px;line-height:1.25}.cb p{font-family:var(--sans);font-size:14px;font-weight:300;line-height:1.9;color:var(--muted)}

/* --- Gallery --- */
.proj-gallery{padding:80px 48px;border-top:1px solid var(--line)}.proj-gallery-inner{max-width:1200px;margin:0 auto}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}.g-wide{grid-column:span 2}
.gph{width:100%;aspect-ratio:16/9;display:block;position:relative;overflow:hidden;background:#111}
.gph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s cubic-bezier(.25,.46,.45,.94);display:block}
.gph:hover img{transform:scale(1.03)}
.gph span{position:absolute;bottom:0;left:0;right:0;padding:32px 18px 14px;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);z-index:2;pointer-events:none}

/* --- Results --- */
.proj-results{padding:80px 0;border-bottom:1px solid var(--line)}.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.rc{background:var(--bg);padding:38px 30px;transition:background .25s}.rc:hover{background:#f0eeea}.rn{font-family:var(--sans);font-size:clamp(30px,4vw,56px);font-weight:300;letter-spacing:-.03em;color:var(--navy);line-height:1;margin-bottom:10px}.rl{font-family:var(--sans);font-size:13px;font-weight:300;color:var(--muted);line-height:1.5}

/* --- Next Project --- */
.proj-next-section{max-width:1200px;margin:0 auto;padding:80px 48px}.pns-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}
.next-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.see-all-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:12px 22px;border:1px solid var(--line);position:relative;overflow:hidden;transition:color .3s}.see-all-btn::before{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.76,0,.24,1)}.see-all-btn:hover{color:var(--bg)}.see-all-btn:hover::before{transform:scaleX(1)}.see-all-btn span{position:relative;z-index:1}
.next-proj-link{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--ink);padding:40px 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}.next-proj-link::before{content:'';position:absolute;inset:0;background:var(--ink);z-index:0;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.76,0,.24,1)}.next-proj-link:hover::before{transform:scaleX(1)}.next-proj-link:hover .npt,.next-proj-link:hover .npa{color:var(--bg)}.next-proj-link:hover .npm{color:rgba(255,255,255,.4)}.next-proj-link:hover .npa{transform:translateX(8px)}.next-proj-link>*{position:relative;z-index:1;transition:color .3s}
.npt{font-family:var(--sans);font-size:clamp(26px,4vw,52px);font-weight:300;letter-spacing:-.025em;line-height:1.05;margin-bottom:8px}.npm{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.npa{font-size:30px;color:var(--navy);transition:color .3s,transform .35s}
.see-all-bar{display:flex;align-items:center;justify-content:center;gap:20px;padding-top:40px}.see-all-bar p{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.see-all-bar a{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);text-decoration:none;padding:12px 26px;border:1px solid rgba(123,105,68,.3);transition:background .3s,color .3s}.see-all-bar a:hover{background:var(--navy);color:#f5f5f5}

/* --- Footer --- */
.footer-award{background:var(--bg);padding:80px 56px 56px;border-top:1px solid var(--line)}.footer-award-cta{text-decoration:none;display:block;margin-bottom:64px}.footer-award-title{font-family:var(--sans);font-size:clamp(36px,6vw,88px);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink)}.footer-award-title .red{color:var(--navy);display:block}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding-top:40px;border-top:1px solid var(--line)}.fct{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:block}.footer-col a,.footer-col p{font-family:var(--sans);font-size:13px;font-weight:300;color:var(--ink);text-decoration:none;line-height:2.1;display:block}.footer-col a:hover{text-decoration:underline}
.footer-bottom{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.footer-bottom span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* --- Thai Language Toggle --- */
body.lang-th,body.lang-th *{font-family:'Noto Sans Thai',sans-serif!important;letter-spacing:0!important}
body.lang-th .lang-btn,body.lang-th .pil,body.lang-th .pn,body.lang-th .proj-num,body.lang-th .proj-cat,body.lang-th .proj-tag,body.lang-th .sec-label,body.lang-th .bc-link,body.lang-th .bc-cur,body.lang-th .bc-sep,body.lang-th .next-eyebrow,body.lang-th .npm,body.lang-th .fct,body.lang-th .footer-bottom span{font-family:'DM Mono',monospace!important;letter-spacing:.1em!important}

/* --- Scroll Reveal --- */
.reveal{opacity:0;transform:translateY(24px)}

/* --- Responsive --- */
@media(max-width:768px){
  header{padding:16px 20px}
  .breadcrumb{padding:86px 20px 0}
  .proj-hero{padding:20px 20px 48px}
  .proj-info-row{grid-template-columns:1fr 1fr}
  .proj-body{padding:0 20px}
  .proj-overview{grid-template-columns:1fr;gap:36px;padding:56px 0}
  .proj-challenge{grid-template-columns:1fr;gap:36px;padding:56px 0}
  .results-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr}
  .g-wide{grid-column:span 1}
  .proj-gallery{padding:56px 20px}
  .proj-next-section{padding:56px 20px}
  .pns-top{flex-direction:column;align-items:flex-start;gap:16px}
  .next-proj-link{padding:28px 16px}
  .menu-overlay-inner{grid-template-columns:1fr;padding:90px 20px 40px;gap:32px}
  .menu-right{display:none}
  .menu-close{right:20px}
  .footer-award{padding:56px 20px 40px}
  .footer-cols{grid-template-columns:1fr 1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:8px}
  .concept-notice{padding:0 20px}
}
@media(max-width:480px){
  .proj-info-row{grid-template-columns:1fr}
  .results-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
}