/* ============================================ */
/* INTERNAL PAGE STYLES                          */
/* ============================================ */

/* page hero (compact, no full viewport) */
.page-hero{position:relative; padding:200px 0 100px; border-bottom:1px solid var(--line); overflow:hidden}
.page-hero .ph-bg{
  position:absolute; inset:0; opacity:.55;
  background-size:cover; background-position:center;
  filter:brightness(.7) contrast(1.05) saturate(.95);
  z-index:0;
  transform:scale(1.04); animation:kb 22s var(--ease) forwards;
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,.15) 30%, var(--bg) 95%);
}
.page-hero .wrap{position:relative; z-index:2}
.page-hero .crumbs{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--mute); margin-bottom:32px; display:flex; align-items:center; gap:12px}
.page-hero .crumbs a{color:var(--ink); transition:color .3s}
.page-hero .crumbs a:hover{color:var(--accent)}
.page-hero .crumbs .sep{color:var(--mute)}
.page-hero h1{font-family:var(--serif); font-weight:300; font-size:clamp(56px,9vw,144px); line-height:.95; letter-spacing:-.04em; max-width:14ch}
.page-hero h1 em{color:var(--accent)}
.page-hero .lede{margin-top:36px; max-width:60ch; font-size:17px; line-height:1.7; color:var(--mute); font-weight:300}

/* projects grid */
.proj-archive{padding:120px 0}
.proj-filter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:64px; padding-bottom:32px; border-bottom:1px solid var(--line)}
.proj-filter button{
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--line); border-radius:99px;
  color:var(--mute); transition:all .3s; background:transparent;
}
.proj-filter button:hover, .proj-filter button.active{border-color:var(--accent); background:var(--accent); color:var(--bg)}
.archive-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:48px 32px}
@media (max-width:900px){.archive-grid{grid-template-columns:repeat(2,1fr); gap:36px 24px}}
@media (max-width:560px){.archive-grid{grid-template-columns:1fr}}
.archive-card{cursor:pointer; transition:transform .6s var(--ease)}
.archive-card:hover{transform:translateY(-6px)}
.archive-card .img-wrap{position:relative; aspect-ratio:4/5; overflow:hidden; background:#1a1a18; margin-bottom:20px}
.archive-card .img-wrap > div{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.4s var(--ease), filter .8s}
.archive-card:hover .img-wrap > div{transform:scale(1.06); filter:brightness(.85)}
.archive-card .num{position:absolute; top:14px; left:14px; font-family:var(--serif); font-size:11px; letter-spacing:.15em; color:#fff; mix-blend-mode:difference; z-index:2}
.archive-card .typ{position:absolute; top:14px; right:14px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; z-index:2}
.archive-card h3{font-family:var(--serif); font-weight:400; font-size:24px; letter-spacing:-.015em; margin-bottom:6px; line-height:1.1}
.archive-card h3 em{color:var(--accent)}
.archive-card .meta{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute)}

/* studio team */
.team-section{padding:120px 0}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr}}
.team-card{padding:40px 0; border-top:1px solid var(--line)}
.team-card .avatar{
  width:80px; height:80px; border-radius:99px; background:var(--paper);
  display:grid; place-items:center; font-family:var(--serif); font-size:32px; color:var(--accent);
  margin-bottom:24px; border:1px solid var(--line);
}
.team-card h4{font-family:var(--serif); font-weight:400; font-size:22px; margin-bottom:6px}
.team-card .role{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:14px}
.team-card p{font-size:13.5px; color:var(--mute); line-height:1.7}

/* awards table */
.awards{padding:100px 0; background:var(--paper)}
.aw-row{display:grid; grid-template-columns:80px 1fr 1fr; gap:40px; padding:24px 0; border-bottom:1px solid var(--line); align-items:baseline}
.aw-row .yr{font-family:var(--serif); color:var(--mute); font-size:14px}
.aw-row .name{font-family:var(--serif); font-size:clamp(18px,1.8vw,24px); font-weight:400}
.aw-row .name em{color:var(--accent)}
.aw-row .by{font-size:13px; color:var(--mute); letter-spacing:.04em}
@media (max-width:760px){.aw-row{grid-template-columns:60px 1fr; gap:16px} .aw-row .by{display:none}}

/* journal posts */
.journal-list{padding:120px 0}
.j-row{display:grid; grid-template-columns:1fr 2fr; gap:60px; padding:48px 0; border-bottom:1px solid var(--line); align-items:start; transition:padding .5s var(--ease)}
.j-row:hover{padding-left:18px}
.j-row .j-img{aspect-ratio:5/4; overflow:hidden; background:#1a1a18}
.j-row .j-img > div{width:100%; height:100%; background-size:cover; background-position:center; transition:transform 1.2s var(--ease)}
.j-row:hover .j-img > div{transform:scale(1.05)}
.j-row .j-meta{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); margin-bottom:20px; display:flex; gap:14px; align-items:center}
.j-row .j-meta .dot{width:4px; height:4px; background:var(--accent); border-radius:99px}
.j-row h3{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3.4vw,44px); line-height:1.1; letter-spacing:-.02em; margin-bottom:18px}
.j-row h3 em{color:var(--accent)}
.j-row p{font-size:15px; color:var(--mute); line-height:1.75; max-width:54ch; margin-bottom:24px}
.j-row .read{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:3px; transition:color .3s}
.j-row .read:hover{color:var(--accent)}
@media (max-width:760px){.j-row{grid-template-columns:1fr; gap:28px} .j-row:hover{padding-left:0}}

/* contact form */
.contact-page{padding:120px 0}
.cp-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:100px; align-items:start}
@media (max-width:900px){.cp-grid{grid-template-columns:1fr; gap:64px}}
.cp-form{display:grid; gap:32px}
.cp-field{display:grid; gap:10px}
.cp-field label{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); font-weight:500}
.cp-field input, .cp-field textarea, .cp-field select{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--ink); font-family:var(--serif); font-size:20px; padding:8px 0;
  outline:none; transition:border-color .3s; font-weight:400;
}
.cp-field input:focus, .cp-field textarea:focus, .cp-field select:focus{border-color:var(--accent)}
.cp-field textarea{min-height:120px; resize:vertical}
.cp-field select{appearance:none; cursor:pointer}
.cp-row{display:grid; grid-template-columns:1fr 1fr; gap:32px}
@media (max-width:560px){.cp-row{grid-template-columns:1fr}}
.cp-submit{
  margin-top:20px; padding:18px 36px; background:var(--accent); color:var(--bg);
  font-family:var(--sans); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; border:0; cursor:pointer; transition:transform .3s, background .3s, color .3s;
  justify-self:start; border-radius:99px;
}
.cp-submit:hover{transform:translateX(6px); background:var(--ink); color:var(--accent)}
.cp-aside{padding:40px 0; border-top:1px solid var(--accent)}
.cp-aside h4{font-family:var(--serif); font-weight:400; font-size:24px; margin-bottom:24px; letter-spacing:-.015em}
.cp-aside .ci{margin-bottom:32px}
.cp-aside .ci strong{display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; font-weight:500}
.cp-aside .ci, .cp-aside .ci a{font-family:var(--serif); font-size:18px; color:var(--ink); line-height:1.5}
.cp-aside .ci a:hover{color:var(--accent)}
.cp-map{aspect-ratio:4/3; background:#0f0f0f; border:1px solid var(--line); margin-top:24px; position:relative; overflow:hidden; display:grid; place-items:center}
.cp-map::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(45deg, transparent 49%, rgba(212,208,99,.12) 49%, rgba(212,208,99,.12) 51%, transparent 51%) 0 0/24px 24px,
    radial-gradient(circle at 50% 50%, rgba(212,208,99,.18), transparent 60%);
}
.cp-map .pin{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px}
.cp-map .pin .dot{width:14px; height:14px; border-radius:99px; background:var(--accent); box-shadow:0 0 0 6px rgba(212,208,99,.2), 0 0 0 14px rgba(212,208,99,.08)}
.cp-map .pin .lbl{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink)}

/* shared sub-footer (used on internal pages) */
.sub-foot{padding:80px 0 40px; border-top:1px solid var(--line); background:var(--bg)}
.sub-foot .sf-grid{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap}
.sub-foot .sf-cta{font-family:var(--serif); font-weight:300; font-size:clamp(28px,4vw,52px); line-height:1.05; letter-spacing:-.02em}
.sub-foot .sf-cta em{color:var(--accent)}
.sub-foot .sf-cta a:hover{color:var(--accent)}
.sub-foot .copy{display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; font-size:11px; color:var(--mute); letter-spacing:.16em; text-transform:uppercase; margin-top:60px; padding-top:32px; border-top:1px solid var(--line)}
.sub-foot .copy .socials{display:flex; gap:24px}
.sub-foot .copy a:hover{color:var(--accent)}