/* ============================================================
   VELOUR STUDIO · css/pages.css
   Page specific composition: work, services, studio, contact, 404.
   ============================================================ */

/* ---------- subpage hero ---------- */
.phero{padding-block:clamp(34px,5vw,62px) clamp(22px,3.2vw,38px)}
.phero h1{
  font-family:var(--serif);font-weight:560;font-size:clamp(38px,6.2vw,86px);
  line-height:1;letter-spacing:-.011em;margin-top:clamp(18px,3vw,36px);max-width:18ch;
}
.phero h1 em{font-style:italic;color:var(--oxblood)}
.phero .lede{margin-top:18px}
.phero .crumb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:26px}
.phero .crumb a{text-decoration:none;color:var(--oxblood);border-bottom:1px dashed var(--thread)}

/* ---------- work: commission sheets ---------- */
.commission{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4.5vw,64px);align-items:start;
  border-top:1px dashed var(--line);padding-block:clamp(30px,4.6vw,54px);
}
.commission:first-of-type{border-top:1px solid rgba(233,167,183,.35)}
.commission__cloth{border:1px solid var(--line);border-radius:16px;aspect-ratio:16/10;position:relative;overflow:hidden}
.commission__cloth i{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px)}
.commission__cloth .tag{
  position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,230,.85);
}
.commission:nth-child(even) .commission__body{order:2}
.commission:nth-child(even) .commission__cloth{order:1}
.commission h3{font-family:var(--serif);font-weight:560;font-size:clamp(26px,3.2vw,40px);line-height:1.05}
.commission .tagline{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.commission p.body{color:var(--ink-2);font-size:15px;max-width:54ch;margin-top:14px}
.commission ul.notes{margin-top:18px;border-top:1px dashed var(--line)}
.commission ul.notes li{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.commission ul.notes li b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:400;padding-top:3px;white-space:nowrap;min-width:86px}
.commission .cta-row{margin-top:22px}
.modelink{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oxblood);text-decoration:none;border-bottom:1px dashed var(--thread)}
.modelink:hover{color:var(--ink)}

/* ---------- services: packages + faq ---------- */
.pack{
  border-top:1px solid rgba(233,167,183,.35);padding-block:clamp(22px,3vw,34px);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);
}
.pack:last-of-type{border-bottom:1px solid rgba(233,167,183,.35)}
.pack h3{font-family:var(--serif);font-weight:560;font-size:clamp(24px,2.6vw,34px)}
.pack .price{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:10px}
.pack .price b{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);font-weight:600;color:var(--ink)}
.pack ul.inc li{display:flex;gap:11px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14.5px;color:var(--ink-2)}
.pack ul.inc li span.plus{color:var(--oxblood);font-family:var(--mono);font-size:11px;padding-top:3px}
.pack .meta{margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:20px;flex-wrap:wrap}
.pack .meta b{color:var(--brass);font-weight:400}

.faq{margin-top:clamp(30px,4vw,52px)}
.faq details{border-bottom:1px dashed var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  padding:16px 0;font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);font-weight:560;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--oxblood);font-size:15px;transform:translateY(2px)}
.faq details[open] summary::after{content:"✕";font-size:12px}
.faq p{color:var(--ink-2);font-size:14.5px;padding-bottom:18px;max-width:68ch}

/* ---------- studio page ---------- */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.story .col p{color:var(--ink-2);font-size:15px;margin-bottom:15px;max-width:60ch}
.story .col p b{color:var(--ink)}
.rules--light .rule{border-top-color:var(--line)}
.rules--light .rule b{color:var(--brass)}
.rules--light .rule h4{color:var(--ink)}
.rules--light .rule p{color:var(--ink-2)}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,36px);margin-top:clamp(30px,4vw,50px);border-top:1px dashed var(--line);padding-top:24px}
.stat b{font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);font-weight:560;display:block;line-height:1}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:block;margin-top:8px}

.clientlist{margin-top:clamp(30px,4vw,52px);border-top:1px solid rgba(233,167,183,.35)}
.clientlist .row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(14px,3vw,40px);border-bottom:1px dashed var(--line);padding:15px 0;align-items:baseline}
.clientlist h4{font-family:var(--serif);font-weight:560;font-size:clamp(19px,1.9vw,25px)}
.clientlist p{color:var(--ink-2);font-size:14.5px}

.editorial{margin-top:clamp(30px,4vw,54px)}
.editorial blockquote{
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,34px);
  line-height:1.2;max-width:30ch;border-top:1px dashed var(--line);padding-top:22px;
}
.editorial cite{display:block;font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-top:16px}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(26px,5vw,72px);align-items:start}
.contact-aside{border-left:1px dashed var(--line);padding-left:clamp(18px,3vw,40px)}
.contact-aside h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:15px;letter-spacing:.04em;color:var(--brass);margin-bottom:10px}
.contact-aside p{font-size:14.5px;color:var(--ink-2);margin-bottom:20px}
.contact-aside ul li{font-size:14px;color:var(--ink-2);padding:8px 0;border-bottom:1px dashed var(--line)}
.contact-aside a{color:var(--oxblood);text-decoration:none;border-bottom:1px dashed var(--thread)}
.contact-aside .block{margin-bottom:26px}

/* ---------- 404 ---------- */
.e404{padding-block:clamp(46px,9vw,110px)}
.e404 .code{font-family:var(--serif);font-weight:560;font-size:clamp(90px,22vw,240px);line-height:.9;color:var(--oxblood)}
.e404 p{color:var(--ink-2);margin-top:16px;max-width:46ch}
.e404 .cta-row{margin-top:26px}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .commission,.pack,.story,.contact-grid{grid-template-columns:1fr}
  .commission:nth-child(even) .commission__body{order:0}
  .commission:nth-child(even) .commission__cloth{order:0}
  .contact-aside{border-left:0;padding-left:0;border-top:1px dashed var(--line);padding-top:22px}
  .stats{grid-template-columns:1fr}
  .clientlist .row{grid-template-columns:1fr}
}