/* Vowscent brand homepage — project shelf, menu, product pages. Loaded after site.css. */

/* ---------- Header menu ---------- */
.header nav { align-items:center }
.nav-dd { position:relative;display:inline-block;font-size:12px }
.nav-dd>summary { list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink);white-space:nowrap }
.nav-dd>summary::-webkit-details-marker { display:none }
.nav-dd>summary:hover { color:var(--clay) }
.nav-caret { font-size:11px;line-height:1;transition:transform .18s ease;color:var(--muted) }
.nav-dd[open] .nav-caret { transform:rotate(180deg) }
.nav-dd[open]>summary { color:var(--clay) }
.nav-dd-panel { position:absolute;top:calc(100% + 20px);left:-20px;width:400px;background:var(--paper);border:1px solid var(--line);padding:10px;z-index:60;box-shadow:0 26px 54px rgba(52,59,49,.15) }
.nav-dd-item { display:grid;grid-template-columns:26px 1fr auto 12px;align-items:center;gap:11px;padding:13px 10px;border-bottom:1px solid #ecede7;color:var(--ink);transition:background .15s ease }
.nav-dd-item:last-of-type { border-bottom:0 }
.nav-dd-item:hover { background:#f0f1e9 }
.nav-dd-num { font:14px/1 var(--serif);color:var(--clay) }
.nav-dd-copy strong { display:block;font-size:13px;font-weight:500;letter-spacing:.1px }
.nav-dd-copy small { display:block;margin-top:4px;font-size:7.5px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase }
.nav-dd-price { font-size:10px;color:var(--clay);white-space:nowrap;letter-spacing:.2px }
.nav-dd-go { font-size:10px;color:#b9bcb0 }
.nav-dd-foot { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 10px 5px;border-top:1px solid var(--line);margin-top:4px;font-size:8px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted) }
.nav-dd-foot a { color:var(--ink) }

/* ---------- First screen: heading + project shelf ---------- */
.shelf-hero { padding-top:44px;padding-bottom:54px }
.shelf-head { display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:64px;margin-bottom:32px }
.shelf-head h1 { font:clamp(38px,4.05vw,56px)/1.03 var(--serif);letter-spacing:-2.2px;margin:15px 0 0 }
.shelf-head h1 em { font-style:italic;color:var(--clay) }
.shelf-note { padding-bottom:7px;max-width:410px }
.shelf-note p { font-size:12.5px;line-height:1.85;color:#5f6559;margin:0 }
.shelf-count { display:block;margin-top:15px;font-size:8px;letter-spacing:1.7px;text-transform:uppercase;color:var(--ink) }
.shelf { display:grid;grid-template-columns:1.22fr 1fr 1fr 1fr;gap:18px;align-items:stretch }
.shelf-caption { font-size:9.5px;letter-spacing:.3px;color:var(--muted);margin:16px 0 0 }

.pcard { display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);color:var(--ink);transition:transform .22s ease,box-shadow .22s ease }
.pcard:hover { transform:translateY(-3px);box-shadow:0 18px 38px rgba(52,59,49,.1) }
.pcard-media { position:relative;height:186px;overflow:hidden;background:#e9ebe0 }
.pcard-media img { width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) }
.pcard-num { position:absolute;top:11px;left:11px;font:13px/1 var(--serif);color:#343b31;background:#ffffffb8;padding:4px 7px }
.pcard-chip { position:absolute;top:11px;right:11px;font-size:7px;letter-spacing:1.2px;text-transform:uppercase;color:#4a5145;background:#ffffffc4;padding:5px 8px;white-space:nowrap }
.pcard-body { display:flex;flex-direction:column;flex:1;padding:17px 18px 18px }
.pcard-cat { font-size:7px;letter-spacing:1.7px;text-transform:uppercase;color:var(--clay) }
.pcard-body h3 { font:20px/1.2 var(--serif);letter-spacing:-.4px;margin:10px 0 0 }
.pcard-body p { font-size:11px;line-height:1.7;color:#666c60;margin:9px 0 0;max-width:32ch }
.pcard-foot { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:15px }
.pcard-price { font-size:10px;letter-spacing:.2px;color:var(--ink) }
.pcard-go { font-size:7.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--clay);white-space:nowrap }
.pcard-featured { background:var(--ink);border-color:var(--ink);color:var(--paper) }
.pcard-featured .pcard-media { height:186px }
.pcard-featured .pcard-media img { filter:grayscale(1) brightness(.92) }
.pcard-featured .pcard-num { background:#343b31d0;color:#f8f7f1 }
.pcard-featured .pcard-chip { background:#c9d9b9;color:#343b31 }
.pcard-featured .pcard-cat { color:#d5ac92 }
.pcard-featured .pcard-body h3 { color:#f8f7f1 }
.pcard-featured .pcard-body p { color:#c8cabf }
.pcard-featured .pcard-foot { border-top:1px solid #ffffff2e;padding-top:15px }
.pcard-featured .pcard-price { color:#e6e8dd }
.pcard-featured .pcard-go { color:#d5ac92 }

.pcard-rose .pcard-media { background:#E8DED8 }
.pcard-sage .pcard-media { background:#E7E9DF }
.pcard-ochre .pcard-media { background:#EEE3D0 }
.pcard-blue .pcard-media { background:#DFE7E6 }
.restore-illustration { width:100%;height:100% }

/* ---------- Pay once flow ---------- */
.flow-section { display:grid;grid-template-columns:.82fr 1.18fr;gap:76px;padding:72px 0 30px }
.flow-head h2 { font:clamp(30px,3.2vw,44px)/1.1 var(--serif);letter-spacing:-1.5px;margin:18px 0 0 }
.flow-head h2 em { color:var(--clay) }
.flow-steps { display:grid }
.flow-step { display:grid;grid-template-columns:56px 1fr;gap:14px;padding:19px 0;border-top:1px solid var(--line) }
.flow-step:first-child { border-top:0;padding-top:6px }
.flow-step>span { font:24px/1 var(--serif);color:var(--clay) }
.flow-step h3 { font:16px/1.3 var(--serif);margin:0 0 6px;letter-spacing:-.2px }
.flow-step p { font-size:11.5px;line-height:1.8;color:#666c60;margin:0;max-width:46ch }

/* ---------- Project pages ---------- */
.project-spec { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0 30px;padding-top:18px;border-top:1px solid var(--line);max-width:520px }
.project-spec dt { font-size:7.5px;letter-spacing:1.5px;color:var(--muted);margin-bottom:7px }
.project-spec dd { margin:0;font-size:12px;line-height:1.5 }
.project-steps { list-style:none;display:grid;margin:34px 0 0;padding:0;max-width:520px }
.project-steps li { display:grid;grid-template-columns:44px 1fr;gap:13px;padding:15px 0;border-top:1px solid var(--line) }
.project-steps li>span { font:19px/1 var(--serif);color:var(--clay) }
.project-steps h3 { font-size:12.5px;font-weight:500;margin:0 0 5px }
.project-steps p { font-size:11px;line-height:1.75;color:var(--muted);margin:0 }
.small-note { font-size:10px;line-height:1.8;color:var(--muted);margin:14px 0 0;max-width:430px }

/* ---------- Responsive ---------- */
@media (max-width:1080px) {
 .shelf-head { gap:34px }
 .shelf { gap:16px }
 .pcard-body p { font-size:11px }
 .flow-section { gap:40px }
}
@media (max-width:960px) {
 .shelf-head { grid-template-columns:1fr;gap:18px }
 .shelf-note p { max-width:56ch }
 .shelf { grid-template-columns:1fr 1fr }
 .pcard-media { height:200px }
 .flow-section { grid-template-columns:1fr;gap:26px;padding-top:52px }
}
@media (max-width:760px) {
 .nav-dd-panel { left:-70px;width:min(90vw,380px) }
 .shelf-hero { padding-top:28px }
 .shelf { grid-template-columns:1fr;gap:16px }
 .pcard-media { height:210px }
 .project-spec { grid-template-columns:1fr;gap:14px }
}

/* Pet Portraits: the fixed look strip replaces the single concept illustration. */
.project-detail-art.pet-art{height:auto;border-radius:0;background:#f2eee4;padding:16px;overflow:visible}
.look-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.look-strip figure{margin:0;min-width:0}
.look-strip-plate{aspect-ratio:3/4;overflow:hidden;background:#e3ddd0}
.look-strip figcaption{font:15px/1.35 Georgia,'Times New Roman',serif;padding-top:8px}
.look-strip figcaption>span{display:block;font:7px/1.6 Arial,sans-serif;letter-spacing:1.2px;color:#777b70;margin-bottom:3px}
@media(max-width:760px){.project-detail-art.pet-art{padding:12px}.look-strip{gap:10px}.look-strip figcaption{font-size:13px}}