/*
Theme Name: homie
Theme URI: https://www.homie.gr
Author: homie design studio
Description: Custom theme for homie.gr — architecture & interior design studio. Minimal greige/wood aesthetic with a hero carousel and a floating project archive managed via the "Έργα" (Projects) post type.
Version: 1.0
Text Domain: homie
*/

:root{
  --paper:#E9E5DD;--paper2:#DAD4C8;--greige:#B7B0A2;--grey:#8B877E;
  --ink:#16130D;--wood:#A5794C;--line:rgba(22,19,13,.14);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Space Mono',monospace;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden;height:100vh}
::selection{background:var(--wood);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.2em;font-size:.68rem}

/* intro */
.intro{position:fixed;inset:0;z-index:1000;background:#000;display:flex;align-items:center;justify-content:center;transition:transform 1s var(--ease)}
.intro.go{transform:translateY(-100%)}
.intro img{width:min(340px,72vw);opacity:0;transform:translateY(14px) scale(.97);transition:1.1s var(--ease)}
.intro.show img{opacity:1;transform:none}

/* nav */
nav{position:absolute;top:0;left:0;width:100%;z-index:200;display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(18px,4vw,54px);background:#000;color:var(--paper);
  opacity:0;transform:translateY(-12px);
  transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s}
body.ready nav{opacity:1;transform:none}
.logo{display:inline-flex}
.logo img{height:40px;width:auto;display:block}
@media(max-width:560px){.logo img{height:34px}}
.nav-r{display:flex;gap:clamp(14px,2.5vw,34px);align-items:center}
.nav-r a{position:relative;white-space:nowrap}
.nav-r a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav-r a:hover::after{width:100%}

/* hero carousel */
.hero{position:relative;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(18px,4vw,54px) clamp(52px,9vh,92px)}
.slides{position:absolute;inset:0;z-index:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.05);transition:opacity 1.5s var(--ease)}
.slide.on{opacity:1}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,12,7,.32) 0%,rgba(15,12,7,0) 26%,rgba(15,12,7,0) 50%,rgba(15,12,7,.66) 100%)}
.hero-content{position:relative;z-index:2}
.hero .up{overflow:hidden}
.hero h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(2.5rem,9vw,8rem);line-height:.96;letter-spacing:-.045em;color:#fff}
.hero h1 em{font-family:'Fraunces',serif;font-style:italic;font-weight:300;color:#EBD9BE}
.hero .rise{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
body.ready .hero .rise{transform:none}
body.ready .hero .l2 .rise{transition-delay:.09s}
body.ready .hero .l3 .rise{transition-delay:.18s}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;margin-top:clamp(24px,5vh,48px);opacity:0;transition:opacity 1s var(--ease) .6s;color:#fff}
body.ready .hero-foot{opacity:1}
.hero-foot p{max-width:40ch;line-height:1.7;color:rgba(255,255,255,.92)}
.hero-foot .idx{font-family:'Fraunces',serif;font-style:italic;font-size:1.25rem;color:#fff}
.dots{position:absolute;right:clamp(18px,4vw,54px);bottom:clamp(22px,4vh,40px);z-index:3;display:flex;gap:9px}
.dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:transparent;cursor:pointer;padding:0;transition:background .3s var(--ease)}
.dot.on{background:#fff}

/* archive */
.archive{position:relative;padding:clamp(70px,10vh,120px) clamp(18px,4vw,54px) clamp(90px,14vh,160px)}
.archive-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:22px}
.archive-head h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.03em}
.archive-head h2 em{font-family:'Fraunces',serif;font-style:italic;color:var(--wood)}
.field{position:relative;height:min(155vh,1220px);margin-top:44px}
.float{position:absolute;width:clamp(180px,21vw,310px);cursor:pointer;will-change:transform}
.shape{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/5;transition:transform .8s var(--ease),box-shadow .6s var(--ease);box-shadow:0 24px 50px -34px rgba(22,19,13,.5)}
.shape img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) brightness(.97);transition:filter .7s var(--ease),transform 1.2s var(--ease);transform:scale(1.04)}
.cap{position:absolute;left:0;bottom:0;width:100%;padding:16px;z-index:2;background:linear-gradient(0deg,rgba(15,12,7,.72),transparent);opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.cap h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;color:#fff;font-size:1.02rem;letter-spacing:-.01em}
.cap span{color:rgba(255,255,255,.66);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase}
.float:hover{z-index:50}
.float:hover .shape{transform:scale(1.04) translateY(-4px);box-shadow:0 40px 70px -38px rgba(22,19,13,.62)}
.float:hover .shape img{filter:grayscale(0) brightness(1);transform:scale(1)}
.float:hover .cap{opacity:1;transform:none}
.drift{animation:drift var(--dur,22s) var(--ease) infinite alternate}
@keyframes drift{to{transform:translate(var(--dx,7px),var(--dy,-11px))}}
.f1{top:0;left:3%;--dur:22s;--dx:7px;--dy:-11px}
.f2{top:14%;left:63%;--dur:26s;--dx:-9px;--dy:12px;width:clamp(160px,17vw,260px)}
.f3{top:40%;left:14%;--dur:20s;--dx:10px;--dy:9px}
.f4{top:34%;left:70%;--dur:28s;--dx:-8px;--dy:-13px;width:clamp(200px,23vw,340px)}
.f5{top:66%;left:42%;--dur:24s;--dx:8px;--dy:-10px;width:clamp(170px,19vw,290px)}
.f6{top:64%;left:5%;--dur:27s;--dx:-8px;--dy:11px;width:clamp(150px,15vw,230px)}
.f7{top:6%;left:34%;--dur:23s;--dx:9px;--dy:-9px;width:clamp(150px,15vw,230px)}
.f8{top:88%;left:66%;--dur:25s;--dx:-7px;--dy:-12px;width:clamp(160px,16vw,250px)}
@media(max-width:760px){
  .field{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:26px 18px}
  .float{position:static;width:auto!important}
  .f2,.f5,.f7{margin-top:34px}
  .shape{aspect-ratio:3/4}
}

section{padding:clamp(70px,12vh,140px) clamp(18px,4vw,54px)}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--grey);margin-bottom:clamp(28px,5vh,50px)}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--wood)}

/* full-bleed band */
.band{position:relative;height:min(80vh,640px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(15,12,7,.5))}
.band .cta{position:absolute;left:0;bottom:0;padding:clamp(20px,4vw,44px);z-index:2;color:#fff}
.band .cta p{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:clamp(1.4rem,3.5vw,2.4rem);max-width:20ch}

/* studio */
.studio{background:var(--ink);color:var(--paper)}
.studio-inner{max-width:920px}
.studio .eyebrow{color:var(--greige)}
.studio h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:300;color:var(--paper);font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.16;letter-spacing:-.02em;margin-bottom:24px}
.studio h3 em{font-family:'Fraunces',serif;font-style:italic;color:var(--wood)}
.studio p{color:#c6bfb0;line-height:1.8;margin-bottom:16px;max-width:62ch}
.founder{display:flex;gap:clamp(18px,3vw,34px);align-items:center;margin-top:clamp(34px,5vh,56px);
  border-top:1px solid rgba(236,227,210,.16);padding-top:clamp(28px,4vh,44px)}
.founder-photo{flex:0 0 auto;width:clamp(116px,17vw,150px);aspect-ratio:360/557;border-radius:2px;overflow:hidden}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.founder-info h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.3rem,3vw,1.9rem);letter-spacing:-.02em;color:var(--paper)}
.founder-role{display:block;font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--greige);margin:10px 0 18px}
.founder-contact{display:flex;flex-direction:column;gap:8px}
.founder-contact a{font-family:'Space Mono',monospace;font-size:.84rem;letter-spacing:.04em;color:var(--paper);width:fit-content;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.founder-contact a:hover{border-color:var(--wood)}

/* contact */
.contact{text-align:center;border-top:1px solid var(--line)}
.contact .huge{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(3rem,15vw,13rem);line-height:.86;letter-spacing:-.05em;display:inline-block;transition:color .4s var(--ease)}
.contact .huge:hover{color:var(--wood)}
.contact-row{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 34px;margin-top:44px;color:var(--grey)}
.contact-row a:hover{color:var(--ink)}
footer{border-top:1px solid var(--line);padding:30px clamp(18px,4vw,54px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--grey)}

/* inner pages (About etc.) */
.page-wrap{max-width:860px;margin:0 auto;padding:calc(84px + clamp(50px,9vh,110px)) clamp(18px,4vw,54px) clamp(70px,12vh,140px)}
.page-wrap .eyebrow{margin-bottom:22px}
.page-wrap h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.03em;line-height:1.02;margin-bottom:clamp(28px,5vh,48px)}
.page-wrap h1 em{font-family:'Fraunces',serif;font-style:italic;color:var(--wood)}
.page-wrap h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:400;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;margin:36px 0 14px}
.page-wrap h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:1.2rem;margin:28px 0 10px}
.page-wrap p{font-family:'Space Mono',monospace;line-height:1.85;color:var(--ink);margin-bottom:18px;font-size:.94rem}
.page-wrap ul,.page-wrap ol{margin:0 0 20px 1.2em;line-height:1.85}
.page-wrap li{margin-bottom:6px}
.page-wrap img{border-radius:2px;margin:18px 0}
.page-wrap a{border-bottom:1px solid var(--wood)}
.page-wrap blockquote{font-family:'Fraunces',serif;font-style:italic;font-size:1.4rem;line-height:1.4;color:var(--wood);margin:26px 0;padding-left:20px;border-left:2px solid var(--wood)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none}.drift{animation:none!important}}