/* Sake for Wine Somms (/somm): page-only additions to css/style.css.
   Event accent: the rust from the event's printed materials, used for labels and the notice band.
   Brand rules still apply: flat colour only, 2px corners, green-deep for affirmative actions. */

.somm {
  --rust: #B4513C;      /* event accent on light backgrounds (AA on washi/white for large text + labels) */
}

.somm .kicker,
.somm .pillar .num { color: var(--rust); }

/* hero: the event artwork shown whole (it carries its own lettering), copy alongside.
   The artwork is vertically centred in its column and its grey "floor" (bottom 146 of its
   840 px rows) is continued edge to edge and down to the bottom of the band: ::before starts
   exactly where the artwork's floor starts, repeats a 1px strip sampled from that floor
   (images/hero-floor.png), then continues in the floor's flat end colour (#E9E9E9).
   Maths, in units of the column width (cqw): artwork height = 840/1262 = 66.561cqw;
   floor height in the artwork = 66.561 * 146/840 = 11.569cqw;
   floor top = 50% + 66.561/2 - 11.569 = 50% + 21.712cqw. */
.somm-hero { background: var(--white); padding: 40px 0 0; position: relative; overflow: hidden; }
.somm-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.somm-hero-art { container-type: inline-size; }
.somm-hero-art-inner { position: relative; height: 100%; display: flex; align-items: center; }
.somm-hero-art img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.somm-hero-art-inner::before {
  content: ""; position: absolute; z-index: 0; top: calc(50% + 21.712cqw); bottom: 0;
  left: 50%; transform: translateX(-50%); width: 400vw;
  background: #E9E9E9 url("/somm/images/hero-floor.png") repeat-x left top / 1px 11.569cqw;
}
.somm-hero-text { position: relative; z-index: 1; align-self: center; padding-bottom: 56px; }
.somm-hero h1 { font-size: clamp(30px, 3.4vw, 44px); margin: 14px 0 18px; }
.somm-hero .lede { font-size: 18px; color: var(--ink-soft); margin-bottom: 26px; max-width: 520px; }
.somm-hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.somm-facts {
  display: flex; flex-wrap: wrap; gap: 14px 40px; margin-bottom: 32px;
  font-size: 15.5px; color: var(--ink-soft);
}
.somm-facts strong {
  display: block; color: var(--ink);
  font-family: var(--caps); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 880px) {
  .somm-hero { padding: 24px 0 0; }
  .somm-hero-art-inner { height: auto; }
  .somm-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .somm-hero-text { padding-bottom: 44px; }
}

/* industry-only band */
.somm-notice { background: var(--rust); color: #fff; font-size: 15px; }
.somm-notice .wrap { padding-top: 14px; padding-bottom: 14px; text-align: center; }
.somm-notice strong {
  font-family: var(--caps); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  margin-right: 12px;
}

/* gallery: tap a photo to enlarge */
.somm-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.somm-gallery button {
  padding: 0; border: 0; background: var(--line); cursor: zoom-in; display: block;
  aspect-ratio: 2 / 3; overflow: hidden;
}
.somm-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.somm-gallery button:hover img { transform: scale(1.03); }
.somm-gallery button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 700px) { .somm-gallery { grid-template-columns: 1fr 1fr; gap: 10px; } }

.somm-lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 92vh; overflow: visible; }
.somm-lightbox::backdrop { background: rgba(48, 48, 48, .92); }
.somm-lightbox img { max-height: 80vh; width: auto; margin: 0 auto; }
.somm-lightbox p { color: var(--paper); text-align: center; margin-top: 12px; font-family: var(--serif); font-size: 19px; }
.somm-lightbox .lb-close, .somm-lightbox .lb-nav {
  position: fixed; background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  width: 46px; height: 46px; border-radius: 2px; font-size: 24px; line-height: 1; cursor: pointer;
}
.somm-lightbox .lb-close { top: 16px; right: 16px; }
.somm-lightbox .lb-nav { top: 50%; transform: translateY(-50%); }
.somm-lightbox .lb-prev { left: 16px; }
.somm-lightbox .lb-next { right: 16px; }

.somm-credit { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }

/* who it's for */
.somm-who { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.somm-who li {
  border: 1px solid var(--line-strong); padding: 8px 16px; border-radius: 2px;
  font-family: var(--caps); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}

/* application steps */
.somm-intro { color: var(--ink-soft); font-size: 18px; margin: -40px 0 36px; }
.somm-steps {
  list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; margin: 0 0 40px;
}
.somm-steps li { counter-increment: s; position: relative; padding-left: 46px; color: var(--ink-soft); font-size: 15.5px; }
.somm-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border: 1px solid var(--rust); color: var(--rust);
  display: grid; place-items: center; font-family: var(--caps); font-weight: 700; font-size: 14px;
}
.somm-steps strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 20px; font-weight: 500; }
@media (max-width: 760px) { .somm-steps { grid-template-columns: 1fr; gap: 18px; } }

.somm .inquiry-form .check { display: flex; align-items: flex-start; margin-top: 12px; }
.somm .inquiry-form .check input { margin-top: 4px; flex: none; }

/* confirmation / email-link messages */
.somm-msg {
  background: var(--white); border: 1px solid var(--line-strong); padding: 48px 40px;
  text-align: center; max-width: 720px; margin: 0 auto;
}
.somm-msg h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 12px 0 14px; }
.somm-msg p { color: var(--ink-soft); max-width: 520px; margin: 0 auto 12px; }
.somm-msg .btn { margin-top: 14px; }
.somm-link { min-height: 60vh; }