/* House of Radiance — concept picker
   Brand colours pulled from the studio's own live page CSS. */

:root{
  --ink:#1E1A16; --ink2:#2D2824;
  --cream:#FEF9F4; --paper:#FAF4EE; --sand:#F2EAE1;
  --line:#E1D5CA; --line-d:#3A342E;
  --gold:#CA9A65; --gold-lt:#F3D1AE; --gold-txt:#915F21;
  --mut:#514C48; --mut2:#5A5450; --ondark:#A39D98;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.18; margin:0; letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 22px}

.top{background:var(--ink); color:#EFE8E0; padding:52px 0 56px; position:relative; overflow:hidden}
.top::after{
  content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px;
  border:1px solid rgba(202,154,101,.18); border-radius:50%;
}
.brand{display:flex; align-items:center; gap:12px; margin-bottom:30px}
.brand svg{width:34px; height:34px; color:var(--gold); flex:none}
.brand b{display:block; font-family:var(--serif); font-size:19px; color:#fff}
.brand i{display:block; font-style:normal; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-top:2px}
.eyebrow{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:16px}
.top h1{font-size:clamp(31px,5vw,50px); color:#fff; margin-bottom:16px; max-width:20ch}
.top p{font-size:16px; color:var(--ondark); max-width:62ch}

.note{
  border:1px solid var(--line); background:var(--paper); padding:24px 26px;
  margin:44px 0 0; display:grid; gap:10px;
}
.note h2{font-size:19px}
.note p{font-size:14.5px; color:var(--mut); line-height:1.75}
.note ul{margin:4px 0 0; padding-left:20px; display:grid; gap:7px}
.note li{font-size:14.5px; color:var(--mut); line-height:1.7}

main{padding:56px 0 24px}
.grp{margin-bottom:52px}
.grp-h{display:flex; align-items:baseline; gap:14px; margin-bottom:8px}
.grp-h h2{font-size:24px}
.grp-h span{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-txt); font-weight:700}
.grp > p{font-size:14.5px; color:var(--mut2); margin-bottom:26px; max-width:70ch}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{
  display:flex; flex-direction:column; border:1px solid var(--line); background:var(--paper);
  text-decoration:none; overflow:hidden; transition:border-color .3s,transform .3s,box-shadow .3s;
}
.card:hover{border-color:var(--gold); transform:translateY(-3px); box-shadow:0 16px 40px rgba(30,26,22,.09)}
/* match the og shot ratio exactly (1200x630) so the headline is never cropped */
.shot{aspect-ratio:1200/630; background:var(--sand); border-bottom:1px solid var(--line); overflow:hidden; position:relative}
.shot img{width:100%; height:100%; object-fit:cover; object-position:50% 0}
.card-b{padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1}
.tagline{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-txt); font-weight:700}
.card h3{font-size:21px}
.card p{font-size:14px; color:var(--mut2); line-height:1.72}
.go{margin-top:auto; padding-top:14px; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:8px}
.card:hover .go{color:var(--gold-txt)}
.go svg{width:15px; height:15px}

.ft{background:var(--ink); color:#EFE8E0; padding:44px 0 28px; margin-top:30px}
.ft p{font-size:11.5px; color:#8B8580; line-height:1.75}
.ft-bot{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line-d); margin-top:22px; padding-top:20px; font-size:12.5px; color:#8B8580;
}
.by{text-decoration:none; color:#8B8580; padding:11px 0; display:inline-block; min-height:40px}
.by b{color:var(--gold); font-weight:700}
.by:hover b{color:var(--gold-lt)}

@media (max-width:900px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .top{padding:40px 0 44px}
  .cards{grid-template-columns:1fr; gap:18px}
  main{padding:40px 0 16px}
  .grp{margin-bottom:40px}
  .note{padding:20px 20px}
  .ft-bot{flex-direction:column; align-items:flex-start; gap:10px}
}