/* Worth a Shot Club brand system: aim = a shot to take; landed = a shot made. */
:root {
  --cream: #F1F3F2;
  --paper: #F9FBFA;
  --line: #C9CECD;
  --muted: #5A605F;
  --blue: #D9E4E5;
  --pink: #F5C5D5;
  --red: #F54C32;
  --orange: #F54C32;
  --ink: #24221F;
}

.brand-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  flex: none;
  vertical-align: middle;
}

.wordmark > .brand-star {
  display: block;
  width: 34px;
  height: 34px;
  margin-left: 8px;
}

.eyebrow:has(.eyebrow-mark),
.path-number:has(.path-mark),
.example-status:has(.status-mark),
.sas-results-kicker:has(.brand-mark),
.brand-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eyebrow-mark { width: 18px; height: 18px; }
.path-mark { width: 21px; height: 21px; }
.status-mark { width: 20px; height: 20px; }
.signal-mark { width: 19px; height: 19px; }
.invitation .signal-mark { width: 20px; height: 20px; }
.future-card { background: var(--paper); }
.future-card > img.blurred-glyph { width: 115px; height: 115px; }

/* Keep the lighting gallery dark enough to judge the looks, with cool mineral
   supporting tones and the same aiming language used elsewhere on Create. */
.look-section { color: var(--paper); }
.look-section .brand-section-label { color: var(--paper); margin-bottom: 22px; }
.look-section .subject-buttons button { border-color: #C9CECD80; color: var(--paper); }
.look-section .subject-buttons button.active { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.look-section .look-controls > span,
.look-section .look-footnote { color: #C9CECD; }
.look-section .look-grid img,
.look-section .look-grid[data-subject="person"] img { background: #303534; }
.look-section .action-row { border-color: #C9CECD55; }
.look-section .review-note { color: var(--paper); }
.product-placeholder { background: var(--paper); border-color: var(--line); }
.starter-sheet { border-color: var(--line); box-shadow: 0 16px 35px #24221F15; }
.newcomer-image-stage > img { background: var(--blue); }
.sas-results { background: var(--blue); }
.sas-dialog-head button { border-color: #F1F3F27D; }
.closing .review-note { background: #F1F3F238; }

/* The co-founder page puts the two marks next to their two verb tenses. */
.work-heading-line { display: inline-flex; align-items: baseline; gap: .15em; }
.work-heading-line > .heading-mark {
  width: .52em;
  height: .52em;
  align-self: center;
  transform: translateY(.03em);
}
.project h3:has(.project-mark) { display: flex; align-items: center; gap: 10px; }
.project-mark { width: 22px; height: 22px; }
.stamp-star > .brand-mark { width: 52px; height: 52px; }
.ribbon-group > .brand-mark { width: 28px; height: 28px; }
.quote-star > .brand-mark { width: 1em; height: 1em; }
.closing-star > .brand-mark { width: 1em; height: 1em; }
.wordmark .mark > .brand-mark { width: 31px; height: 31px; }

/* The image-series page moves from a new idea to the finished work. */
.brand-section-label {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
.brand-section-label > .brand-mark { width: 23px; height: 23px; }
.proof-kicker, .offer-kicker { display: flex; align-items: center; gap: 8px; }
.proof-kicker > .brand-mark, .offer-kicker > .brand-mark,
.route-status > .brand-mark { width: 18px; height: 18px; }
.sheet-mark { width: 28px; height: 28px; }
.sas-kicker > .brand-mark { width: 19px; height: 19px; }
.sas-results-kicker > .brand-mark { width: 20px; height: 20px; }
.offer-contents li::before {
  content: "";
  top: 18px;
  width: 20px;
  height: 20px;
  background: url("brand/aim.svg") center / contain no-repeat;
}
.closing-top > img.closing-star {
  width: clamp(90px, 12vw, 165px);
  height: clamp(90px, 12vw, 165px);
  object-fit: contain;
  transform: none;
}

@media (max-width: 760px) {
  .wordmark > .brand-star { width: 27px; height: 27px; margin-left: 4px; }
  .work-heading-line > .heading-mark { width: .48em; height: .48em; }
  .project-mark { width: 19px; height: 19px; }
  .ribbon-group > .brand-mark { width: 23px; height: 23px; }
  .offer-contents li::before { width: 18px; height: 18px; }
  .closing-top > img.closing-star { width: 64px; height: 64px; margin-right: 0; }
}

@media (max-width: 360px) {
  .wordmark > .brand-star { width: 23px; height: 23px; margin-left: 3px; }
  .closing-top > img.closing-star { width: 44px; height: 44px; }
}

.create-visual .image-disclosure{position:absolute;z-index:5;left:16px;bottom:14px;background:#F1F3F2;color:#24221F;padding:5px 8px;font:600 11px/1.2 Cabinet,Arial,sans-serif}