/* parladesigns.com — shared styles for the home page and /about/ (PARLA brand palette) */
:root{
  /* PARLA brand palette */
  --ground:#FCF8F5;          /* off white */
  --grass:#E5DEAA;           /* grass */
  --aubergine:#3D0447;
  --tangerine:#FF4200;
  --ink:#3D0447;             /* headings, wordmark */
  --ink-2:#3B2B40;           /* body copy */
  --muted:#7A6C7E;           /* small labels */
  --line:rgba(61,4,71,.16);  /* hairlines */
  --line-2:rgba(61,4,71,.30);/* card edges */
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Outfit", "Helvetica Neue", Arial, sans-serif;
  --gutter:40px; --max:1320px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink-2);
  font-family:var(--sans); font-weight:400; font-size:16.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
}
main{flex:1}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.label{
  font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.logo{display:block; fill:currentColor; color:var(--ink)}

/* masthead */
.mast{
  position:sticky; top:0; z-index:10;
  background:rgba(252,248,245,.84); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.mast .wrap{display:flex; align-items:center; justify-content:space-between; height:66px}
.mast .logo{height:15px; width:auto}
.mast nav{display:flex; gap:30px}
.mast nav a{
  font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
  padding:6px 0; border-bottom:1px solid transparent; transition:border-color .2s, color .2s;
}
.mast nav a:hover, .mast nav a[aria-current]{border-bottom-color:var(--tangerine); color:var(--tangerine)}

/* hero */
.hero{padding:132px var(--gutter) 128px}
.hero .logo{width:min(78vw,620px); height:auto; margin:0 0 40px}
.lede{
  font-family:var(--serif); font-weight:300; font-style:italic; color:var(--tangerine);
  font-size:clamp(30px,3.6vw,46px); line-height:1.15; margin:0; letter-spacing:.005em;
}

/* section heading */
.band{
  border-top:1px solid var(--line); padding-top:24px; margin-bottom:64px;
  display:flex; justify-content:space-between; align-items:baseline; gap:32px;
}
.band h2{font-family:var(--serif); font-weight:300; font-size:38px; line-height:1.05; margin:0; color:var(--ink)}

/* project grid */
.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; align-items:start}
.card{
  display:block; border:1px solid var(--line-2); background:var(--ground); color:var(--ink-2);
  transition:border-color .25s;
}
.card:hover{border-color:var(--tangerine)}
.card .cover{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; transition:opacity .25s}
.card:hover .cover{opacity:.9}
.card .placeholder{
  width:100%; aspect-ratio:16/10; background:var(--grass);
  display:flex; align-items:flex-end; padding:22px 26px;
  font-family:var(--serif); font-weight:300; font-size:clamp(48px,5vw,72px); line-height:1; color:var(--tangerine);
}
.card .body{padding:26px 28px 30px; border-top:1px solid var(--line)}
.card h3{
  font-family:var(--serif); font-weight:400; font-size:31px; line-height:1.12;
  margin:0 0 10px; letter-spacing:-.005em; color:var(--ink);
}
.card p{margin:0 0 20px}
.card .meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.tag{
  display:inline-block; border:1px solid var(--line-2); border-radius:2px; background:var(--grass);
  padding:5px 9px 4px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  transition:border-color .2s, color .2s;
}
.card:hover .tag{border-color:var(--tangerine); color:var(--tangerine)}
.card .date{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.note{color:var(--muted); font-family:var(--serif); font-weight:300; font-size:24px; margin:0}

/* about */
.about{padding:96px var(--gutter) 0}
.about .band{padding-top:0; border-top:0}
.about .band{margin-bottom:56px}
.about .cols{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:64px; align-items:start}
.about .bio p{margin:0 0 20px; max-width:62ch}
.about .bio p:first-child{
  font-family:var(--serif); font-weight:300; font-size:clamp(24px,2.4vw,31px); line-height:1.3; color:var(--ink);
  margin-bottom:28px;
}
.about .side{display:grid; gap:26px; padding-top:10px}
.about .side div{border-top:1px solid var(--line); padding-top:14px}
.about .side .label{display:block; margin-bottom:6px}
.about .bio a.inline{color:var(--tangerine); border-bottom:1px solid currentColor}
.about .side a{color:var(--ink); border-bottom:1px solid var(--line-2); transition:color .2s, border-color .2s}
.about .side a:hover{color:var(--tangerine); border-bottom-color:var(--tangerine)}
.about .side a .arrow{font-size:.9em; margin-left:.25em}

footer{margin-top:140px; border-top:1px solid var(--line)}
footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding:28px var(--gutter) 44px}
footer .logo{height:13px; width:auto}
footer .right{display:flex; gap:28px; flex-wrap:wrap}
footer a.label:hover{color:var(--tangerine)}

@media (max-width:1100px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  :root{--gutter:22px}
  .hero{padding:84px var(--gutter) 84px}
  .hero .logo{margin-bottom:30px}
  .grid{grid-template-columns:1fr; gap:36px}
  .band{margin-bottom:44px}
  .about{padding-top:56px}
  .about .cols{grid-template-columns:1fr; gap:36px}
  .mast nav{gap:18px}
  .mast nav a{font-size:11px}
  footer{margin-top:104px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} html{scroll-behavior:auto} }