/*
Theme Name: Line and Poise
Theme URI: https://lineandpoise.com
Author: Hengameh Honarvar
Author URI: https://lineandpoise.com
Description: A one-page editorial theme for Line & Poise, personal styling and image consulting. Includes hero, about, portfolio gallery, and contact sections with a premium cream/black/burgundy editorial palette.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: line-and-poise
*/

:root{
  --ink:#17140f;
  --bone:#ece5d8;
  --camel:#a9835c;
  --smoke:#66605a;
  --garnet:#7a2632;
  --line: rgba(23,20,15,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{display:block; width:100%; height:100%; object-fit:cover;}
a{color:inherit; text-decoration:none;}

.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:0.7rem;
}

/* NAV */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem clamp(1.2rem,4vw,3.5rem);
}
nav .brand{ display:flex; align-items:center; gap:0.7rem; }
nav .brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bone);
  border-radius:6px;
  padding:0.3rem 0.5rem;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  flex-shrink:0;
}
nav .brand-mark img{ width:1.9rem; height:auto; display:block; }
nav .brand-text{
  font-family:'Fraunces', serif; font-size:1.15rem; font-weight:500; letter-spacing:0.04em;
  text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
}
nav .links{ display:flex; gap:clamp(1rem,3vw,2.4rem); }
nav .links a{
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
}

/* HERO */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  background:var(--ink);
}
.hero-copy{
  color:var(--bone);
  display:flex; flex-direction:column; justify-content:center;
  padding: 6rem clamp(1.5rem,5vw,4.5rem) 4rem;
  position:relative;
}
.hero-eyebrow{ color:var(--camel); margin-bottom:1.6rem; }
.hero h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2.6rem, 5.6vw, 4.6rem);
  line-height:1.02;
  letter-spacing:-0.01em;
}
.hero h1 em{ font-style:italic; font-weight:300; color:var(--camel); }
.hero p{
  max-width:32ch;
  margin-top:1.8rem;
  color:rgba(236,229,216,0.72);
  font-size:1rem; line-height:1.6; font-weight:300;
}
.hero-cta{
  margin-top:2.6rem;
  display:inline-flex; align-items:center; gap:0.9rem;
  width:fit-content;
  padding:0.95rem 1.7rem;
  border:1px solid rgba(236,229,216,0.4);
  color:var(--bone);
  transition:all .25s ease;
}
.hero-cta:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }

.hero-media{ position:relative; overflow:hidden; }
.hero-media img{ filter:saturate(1.02) contrast(1.02); }
.hero-tag{
  position:absolute; left:1.4rem; bottom:1.4rem;
  color:var(--bone);
  background:rgba(23,20,15,0.55);
  padding:0.55rem 0.9rem;
  backdrop-filter:blur(3px);
}
.hero-inset{
  position:absolute;
  width:34%; aspect-ratio:3/4;
  right:1.6rem; bottom:1.6rem;
  border:5px solid var(--bone);
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
}

section{ padding: clamp(4rem,9vw,7.5rem) clamp(1.5rem,5vw,4.5rem); }
.section-head{ display:flex; align-items:baseline; gap:1.2rem; margin-bottom:3rem; }
.section-head .num{ color:var(--camel); }
.section-head h2{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(1.8rem,3vw,2.6rem);
}
.rule{ height:1px; background:var(--line); flex:1; }

/* ABOUT */
.about{ background:var(--bone); }
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
}
.about-copy p{
  font-size:1.05rem; line-height:1.75; font-weight:300;
  color:var(--smoke);
  margin-bottom:1.3rem;
  max-width:52ch;
}
.about-copy p.lede{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:1.4rem; color:var(--ink); line-height:1.5;
  margin-bottom:1.8rem;
}
.about-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.about-photos .tall{ grid-row: span 2; aspect-ratio:3/4.4; overflow:hidden; }
.about-photos .short{ aspect-ratio:4/3.1; overflow:hidden; }
.stat-row{ display:flex; gap:2.4rem; margin-top:2.2rem; }
.stat{ }
.stat b{ font-family:'Fraunces', serif; font-size:1.6rem; display:block; }
.stat span{ color:var(--smoke); font-size:0.82rem; }

/* CTA BANNER */
.cta-banner{
  background:var(--ink);
  color:var(--bone);
  padding:clamp(3rem,6vw,4.5rem) clamp(1.5rem,5vw,4.5rem);
  text-align:center;
  border-top:1px solid rgba(236,229,216,0.1);
  border-bottom:1px solid rgba(236,229,216,0.1);
}
.cta-inner{ max-width:640px; margin:0 auto; }
.cta-banner h3{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(1.6rem,3vw,2.2rem);
  margin-bottom:0.8rem;
}
.cta-banner p{
  color:rgba(236,229,216,0.7); font-weight:300;
  margin-bottom:1.8rem; font-size:1rem;
}
.cta-btn{
  display:inline-flex; align-items:center;
  background:var(--garnet); color:var(--bone);
  padding:0.95rem 2rem;
  border:1px solid var(--garnet);
  transition:all .25s ease;
}
.cta-btn:hover{ background:transparent; border-color:var(--bone); }

/* GALLERY */
.gallery{ background:var(--ink); color:var(--bone); }
.gallery .section-head h2{ color:var(--bone); }
.gallery .rule{ background:rgba(236,229,216,0.16); }
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:0.9rem;
}
.card{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/4;
  background:#000;
}
.card img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); opacity:.92; }
.card:hover img{ transform:scale(1.06); opacity:1; }
.card .look-tag{
  position:absolute; left:0; right:0; bottom:0;
  padding:0.7rem 0.85rem;
  background:linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  color:var(--bone);
  font-size:0.66rem;
}
.card.wide{ grid-column: span 2; }

/* CONTACT */
.contact{
  background:var(--bone);
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
}
.contact-media{ aspect-ratio:4/5; overflow:hidden; position:relative; }
.contact-media .tag{
  position:absolute; top:1.2rem; left:1.2rem;
  background:var(--bone); color:var(--ink);
  padding:0.4rem 0.7rem;
}
.contact h2{
  font-family:'Fraunces', serif; font-weight:500;
  font-size:clamp(1.9rem,3.4vw,2.8rem);
  margin-bottom:1.2rem;
  max-width:14ch;
}
.contact p.lede{ color:var(--smoke); font-weight:300; max-width:42ch; margin-bottom:2.2rem; line-height:1.65; }
form{ display:flex; flex-direction:column; gap:1.1rem; max-width:440px; }
form label{ font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--smoke); margin-bottom:0.35rem; display:block; }
form input, form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:0.6rem 0.1rem;
  font-family:'Work Sans', sans-serif;
  font-size:1rem;
  color:var(--ink);
}
form input:focus, form textarea:focus{ outline:none; border-color:var(--ink); }
.send-btn{
  margin-top:0.6rem;
  align-self:flex-start;
  background:var(--ink); color:var(--bone);
  padding:0.95rem 2rem;
  border:none; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  transition:background .25s ease;
}
.send-btn:hover{ background:var(--garnet); }

footer.site-footer{
  background:var(--ink); color:rgba(236,229,216,0.5);
  padding:2rem clamp(1.5rem,5vw,4.5rem);
  display:flex; justify-content:space-between; align-items:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase;
  flex-wrap:wrap; gap:1rem;
}

/* SOCIAL / CONTACT LINKS */
.lap-social{
  display:flex; align-items:center; flex-wrap:wrap;
  margin-top:1.6rem;
}
.lap-social-link{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.3rem 0.6rem;
  transition:opacity .2s ease;
}
.lap-social-sep{
  color:var(--line); font-size:0.9rem; margin:0 0.3rem;
  user-select:none;
}
.lap-social--contact .lap-social-link{ color:var(--ink); }
.lap-social--contact .lap-social-link:hover{ opacity:0.6; }
.lap-social--footer{ margin-top:0; }
.lap-social--footer .lap-social-link{
  color:rgba(236,229,216,0.75); padding:0.3rem 0.5rem; font-size:0.62rem;
}
.lap-social--footer .lap-social-sep{ color:rgba(236,229,216,0.25); }
.lap-social--footer .lap-social-link:hover{ color:var(--bone); }
.lap-social-link svg{ display:block; flex-shrink:0; }

/* WordPress core alignment helpers (kept minimal for one-page theme) */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal!important;
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .hero-media{ min-height:55vh; }
  .hero-copy{ padding-top:7rem; padding-bottom:3rem; }
  .hero-inset{ display:none; }
  .about-grid, .contact{ grid-template-columns:1fr; }
  .contact-media{ aspect-ratio:16/10; }
  .grid{ grid-template-columns: repeat(2,1fr); }
  .card.wide{ grid-column: span 2; }
  nav .links{ display:none; }
  section{ padding: 3.5rem 1.5rem; }
  .stat-row{ flex-wrap:wrap; row-gap:1.2rem; column-gap:1.8rem; }
}

@media (max-width:640px){
  nav{ padding:1rem 1.2rem; }
  nav .brand-mark img{ width:1.5rem; }
  nav .brand-text{ font-size:0.95rem; }
  .hero-copy{ padding-top:6.5rem; padding-left:1.5rem; padding-right:1.5rem; }
  .hero h1{ font-size:clamp(2.1rem,8vw,2.8rem); }
  .hero p{ max-width:none; }
  .hero-cta{ width:100%; justify-content:center; }
  .about-photos{ grid-template-columns:1fr 1fr; gap:0.6rem; }
  .about-photos .tall{ grid-row:auto; grid-column:1 / -1; aspect-ratio:4/3.4; }
  .about-copy p, .about-copy p.lede{ max-width:none; }
  .stat-row{ gap:1.4rem; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:0.6rem; }
  .card.wide{ grid-column:span 2; }
  .contact-media{ aspect-ratio:4/3; }
  .contact h2{ max-width:none; }
  form{ max-width:100%; }
  .send-btn{ width:100%; text-align:center; justify-content:center; }
  footer.site-footer{ flex-direction:column; align-items:flex-start; gap:0.8rem; text-align:left; }
  .lap-social{ margin-top:1.2rem; }
}