/* /looks/ page. Loaded after styles.css. */
.no-js .look-prev { display: none; }

.looks-page { padding-top: 48px; padding-bottom: 72px; }
.looks-page h1 { font-size: clamp(34px, 5vw, 56px); max-width: 18ch; }
.looks-page h1 em { font-style: normal; color: var(--accent); }
.looks-page .lede { margin-bottom: 8px; }
.looks-page h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; margin: 56px 0 18px; }
.looks-page a { color: var(--accent); }

.how ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .how ul { grid-template-columns: 1fr; } }
.how li { border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 16px 18px; color: var(--muted); }
.how li strong { color: var(--text); display: block; margin-bottom: 2px; }

.scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.scenes > h2 { grid-column: 1 / -1; }
@media (max-width: 760px) { .scenes { grid-template-columns: 1fr; } }
.scene-block { border-top: 1px solid var(--line); padding: 16px 0 6px; scroll-margin-top: 80px; }
.scene-block h3 { font-size: 19px; letter-spacing: -0.01em; }
.scene-block p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.scene-block .scene-picks { color: var(--text); font-weight: 600; }

.all-looks .note { color: var(--dim); font-size: 14.5px; margin: -6px 0 18px; }
.look-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.look-card { border: 1px solid var(--line); background: var(--card); border-radius: 16px; overflow: hidden; scroll-margin-top: 80px;
  display: grid; grid-template-columns: 1fr; align-items: stretch; }
.look-card:target { border-color: var(--accent); }
.look-prev { width: 96px; height: 100%; min-height: 119px; object-fit: cover; display: block; background: var(--bg-2); }
.no-js .look-card { grid-template-columns: 1fr; }
.look-body { padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
.look-body h3 { font-size: 18px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.look-for { margin: 0; color: var(--text); font-size: 15px; }
.look-for span { display: block; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.look-scenes { margin: 0; font-size: 13.5px; color: var(--dim); }
.look-scenes a { color: var(--muted); }
@media (max-width: 900px) { .look-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .look-cards { grid-template-columns: 1fr; } }

.looks-faq { max-width: 820px; }
.looks-faq details { border-bottom: 1px solid var(--line); }
.looks-faq summary { cursor: pointer; padding: 18px 36px 18px 0; font-weight: 600; font-size: 18px; position: relative; list-style: none; }
.looks-faq summary::-webkit-details-marker { display: none; }
.looks-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 24px; font-weight: 400; color: var(--accent); }
.looks-faq details[open] summary::after { content: "–"; }
.looks-faq details p { margin: 0 0 18px; color: var(--muted); }
.looks-page .more { margin: 40px 0 0; color: var(--muted); }