/* dccocktailweek.com, rebuilt as a static site. The type scale, gutters, header and collage below are the
   rules Squarespace 7.1 applies on the live site (read from its site.css on 2026-10-14), with this site's
   values: base 17px (16px under 992px wide), heading sizes 4 / 2.8 / 2.2 / 1.2, large text 1.4, small .9,
   site title 2, page padding 4vw (6vw on phones), max page width 1920px. Squarespace sizes type from the
   viewport WIDTH on desktop (capped at 1920) and from the viewport HEIGHT on portrait phones; --u below is
   that unit, so every size is (value - 1) * --u + 1rem exactly as the live stylesheet computes it.
   Fonts: Poppins 300 body, 500 headings, title and buttons. */

:root {
  --accent: #E63C19;        /* rgb(230,60,25): headings, wordmark, buttons, rules */
  --ink: #000A09;           /* body copy, nav */
  --white: #FFFFFF;
  --card: #ECAD0E;          /* rgb(236,173,14): the collage card on venue pages */
  --font: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --u: min(1.2vw, 23.04px); /* desktop and landscape: 1.2vw, capped at 1.2% of 1920 */
  --fs-h1: calc(3 * var(--u) + 1rem);
  --fs-h2: calc(1.8 * var(--u) + 1rem);
  --fs-h3: calc(1.2 * var(--u) + 1rem);
  --fs-h4: calc(.2 * var(--u) + 1rem);
  --fs-large: calc(.4 * var(--u) + 1rem);
  --fs-small: calc(-.1 * var(--u) + 1rem);
  --fs-title: calc(var(--u) + 1rem);
  --fs-body: 1rem;
  --gutter: 4vw;            /* --pagePadding */
  --vpad: 3.3vmax;          /* section content padding, top and bottom */
  --block: 17px;            /* every block's inner padding */
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root { --u: calc(.012 * min(100vh, 900px)); }
}
@media (max-width: 767px) {
  :root { --gutter: 6vw; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 17px; }
@media (max-width: 991px) { html { font-size: 16px; } }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-weight: 300; font-size: 1rem; line-height: 1.8em; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── header: absolute over the page; the section pads itself by the header's height ──
   desktop: 3vw top and bottom, the page padding at the sides, the title's 1.4em line box.
   phone (under 800px, or a touch screen up to 1024px): 6vw all round, a 37px row (the burger). */
.sqs-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 3vw var(--gutter); display: flex; align-items: center; }
.sqs-title { font-size: var(--fs-title); font-weight: 500; line-height: 1.4em; color: var(--accent); text-decoration: none; }
.sqs-nav { display: flex; justify-content: flex-end; margin-left: auto; padding-left: 3vw; }
.sqs-nav a { color: var(--ink); text-decoration: none; font-weight: 300; font-size: 1rem; line-height: 1.8em; padding: .1em 0; }
.sqs-nav a + a { margin-left: 1.5vw; }
.sqs-nav a[aria-current="page"] { border-bottom: 1px solid var(--ink); }
.sqs-nav a:hover { opacity: .7; }
.sqs-burger { display: none; flex: 0 0 auto; width: 50px; height: 37px; margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
.sqs-burger span { position: absolute; left: 7.5px; top: 18px; width: 35px; height: 1px; background: var(--ink); }
.sqs-burger span:first-child { transform: translateY(-9.5px); }
.sqs-burger span:last-child { transform: translateY(9.5px); }
.sqs-menu { display: none; position: fixed; inset: 0; background: var(--white); z-index: 20; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--gutter); }
.sqs-menu a { font-size: 8.5vmin; line-height: 1.8em; font-weight: 300; color: var(--ink); text-decoration: none; margin: 3vw 5vw; }
@media (min-width: 576px) { .sqs-menu a { font-size: 6.6vmin; } }
@media (min-width: 768px) { .sqs-menu a { font-size: 6vmin; } }
.sqs-menu .close { position: absolute; top: 6vw; right: 6vw; width: 50px; height: 37px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ink); cursor: pointer; }
body.menu-open .sqs-menu { display: flex; }
.sqs-section { padding-top: calc(6vw + 1.4 * (var(--u) + 1rem)); }
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .sqs-header { padding: 6vw; }
  .sqs-nav { display: none; }
  .sqs-burger { display: block; }
  .sqs-section { padding-top: calc(12vw + max(37px, 1.4 * (var(--u) + 1rem))); }
}

/* ── the one page section ── */
.sqs-section { min-height: 33vh; display: flex; align-items: center; }
.sqs-content { width: 100%; padding: var(--vpad) var(--gutter); max-width: 1920px; margin: 0 auto; }
.sqs-layout { margin: 0 calc(var(--block) * -1); }
.sqs-row { display: flex; flex-wrap: wrap; }
.sqs-col { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .sqs-col-12 { flex-basis: 100.0000%; max-width: 100.0000%; }
  .sqs-col-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
  .sqs-col-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .sqs-col-9 { flex-basis: 75.0000%; max-width: 75.0000%; }
  .sqs-col-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
  .sqs-col-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
  .sqs-col-6 { flex-basis: 50.0000%; max-width: 50.0000%; }
  .sqs-col-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
  .sqs-col-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .sqs-col-3 { flex-basis: 25.0000%; max-width: 25.0000%; }
  .sqs-col-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
  .sqs-col-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
}
.sqs-block { padding: var(--block); }
/* the live layout engine: in the first row, each column's first block loses its top padding, and a column holding a
   single block loses its bottom padding too; on phones (to 767px) every block keeps 17px all round */
@media (min-width: 768px) {
  .sqs-layout > .sqs-row:first-child > .sqs-col > .sqs-block:not(.sqs-float-right):first-child { padding-top: 0; }
  .sqs-layout > .sqs-row:first-child > .sqs-col > .sqs-block:not(.sqs-float-right):first-child:last-child { padding-bottom: 0; }
}
.sqs-block:empty { padding: 0; }
/* spacers: a classic sized spacer is 34px per step; a component spacer is one body line plus a share of its width
   (padding-bottom set inline); both disappear on phones */
.sqs-spacer .space { height: 1.8rem; box-sizing: content-box; }
.sqs-spacer .space.sized { height: var(--h, 34px); }
@media (max-width: 767px) { .sqs-spacer { display: none; } }

/* text: headings 2rem apart, paragraphs 1rem; heading line heights are 1.4em scaled by (1 + (1 - size) / 25) */
.sqs-html h1, .sqs-html h2, .sqs-html h3, .sqs-html h4 { color: var(--accent); font-weight: 500; margin: 2rem 0; }
.sqs-html h1 { font-size: var(--fs-h1); line-height: 1.232em; }
.sqs-html h2 { font-size: var(--fs-h2); line-height: 1.2992em; }
.sqs-html h3 { font-size: var(--fs-h3); line-height: 1.3328em; }
.sqs-html h4 { font-size: var(--fs-h4); line-height: 1.3888em; }
.sqs-html p { margin: 1rem 0; }
.sqs-html > :first-child { margin-top: 0; }
.sqs-html > :last-child { margin-bottom: 0; }
.sqs-html strong, .sqs-html b { font-weight: 700; }
.sqs-html a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: .44em; text-decoration-thickness: 1px; }
.sqs-html ul, .sqs-html ol { margin: 1em 0; padding-left: 40px; }
.sqs-html li { margin: 0; }
.sqs-html li > p { margin: .5em 0; }
.sqs-html .text-align-center { text-align: center; }
.sqs-html em { font-style: italic; }
.sqs-html .kept-empty::after { content: "\00a0"; }

/* an image block that floats beside text (the Responsibility logo) */
.sqs-float-right { float: right; width: 50%; margin-left: var(--block); padding: var(--block); }
.sqs-col-0 { display: none; }
/* every block but a text block clears a floated block above it (text wraps beside the float; rules, galleries and buttons drop under it) */
.sqs-block:not(.sqs-html):not(.sqs-float-right) { clear: both; }

@media (max-width: 767px) { .sqs-float-right { float: none; width: calc(100% - var(--block)); margin-left: var(--block); padding: var(--block); } }

/* images */
.sqs-image a { display: block; }
.sqs-image.stack > img, .sqs-image.stack > a > img { width: 100%; height: auto; }
.sqs-image.stack .stack-gap { margin-top: 7%; }

/* button */
.sqs-button-wrap { text-align: center; }
.sqs-button { display: inline-block; background: var(--accent); color: var(--white); font-weight: 500; font-size: 1rem; line-height: normal; letter-spacing: .02em; padding: 1.2em 2.004em; text-decoration: none; border: 0; border-radius: 0; }
.sqs-button:hover { opacity: .85; }

/* rule */
.sqs-hr { border: 0; height: 1px; background: var(--accent); margin: .5rem 0; }

/* strip gallery: a horizontal row of photos, 22.8% of the content width tall, scrolled by arrows */
.sqs-strip { position: relative; }
/* the strip's height is the share of its width Squarespace's script set on the live block (--ar, measured per block);
   photos keep their proportions at that height, run edge to edge, and centre when they do not fill the row */
.sqs-strip .track { display: flex; gap: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; aspect-ratio: var(--ar, 100/22.8125); justify-content: center; justify-content: safe center; }
.sqs-strip .track::-webkit-scrollbar { display: none; }
.sqs-strip .track a { flex: 0 0 auto; height: 100%; display: block; }
.sqs-strip .track img { height: 100%; width: auto; max-width: none; }
.sqs-arrows { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.sqs-arrows button { pointer-events: auto; width: 44px; height: 60px; border: 0; background: rgba(0, 0, 0, .12); color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.sqs-arrows button:hover { background: rgba(0, 0, 0, .25); }

/* slideshow: slides stacked in one box, crossfade; the banners autoplay every 4 s */
.sqs-slideshow { position: relative; }
.sqs-slideshow .slides { position: relative; overflow: hidden; }
.sqs-slideshow .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.sqs-slideshow .slide.on { position: relative; opacity: 1; }
.sqs-slideshow .slide img { width: 100%; height: auto; }
.sqs-thumbs { display: flex; gap: 0; margin-top: var(--tm, 20px); height: var(--th, 80px); justify-content: center; overflow: hidden; }
.sqs-thumbs button { flex: 0 0 auto; height: var(--th, 80px); border: 0; padding: 0; background: var(--white); cursor: pointer; opacity: .55; }
.sqs-thumbs button.on { opacity: 1; }
.sqs-thumbs img { width: auto; height: 100%; max-width: none; }
@media (prefers-reduced-motion: reduce) { .sqs-slideshow .slide { transition: none; } .sqs-strip .track { scroll-behavior: auto; } }

/* collage (venue pages): two half-width columns. The photo sits in the first at 70% of the block (it runs
   into the second); the card sits in the second, 80% of the column wide with a 20% margin on the photo's
   side, 10% of the column as padding, centred on the taller of the two. Same at every width. */
.sqs-collage .inner { display: flex; position: relative; }
/* the photo is a 70% flex item pulled 20% under the card column, so nothing overflows its box and the sums stay 100% */
.sqs-collage .inset { flex: 0 0 70%; max-width: 70%; margin-right: -20%; }
.sqs-collage .inset img { width: 100%; height: auto; }
.sqs-collage .card-wrap { flex: 0 0 50%; max-width: 50%; display: flex; align-items: center; position: relative; z-index: 2; }
.sqs-collage .card { width: 80%; margin-left: 20%; padding: 10%; background: var(--card); overflow-wrap: break-word; } /* a word wider than the card breaks, as it does live ("Com / e" at 390) */
.sqs-collage .card .title { font-size: 1rem; line-height: 1.8em; }
.sqs-collage .card .title h2 { display: inline; font-size: var(--fs-h2); line-height: 1.2992em; font-weight: 500; color: var(--accent); margin: 0; white-space: pre-wrap; }
.sqs-collage .card .subtitle { margin-top: 4%; }
.sqs-collage .card .subtitle > :first-child { margin-top: 0; }
.sqs-collage .card .subtitle > :last-child { margin-bottom: 0; }
.sqs-collage .card .subtitle p { margin: 1rem 0; font-size: var(--fs-large); line-height: 1.8em; color: var(--accent); font-weight: 300; white-space: pre-wrap; }
.sqs-collage.photo-right .inner { flex-direction: row-reverse; }
.sqs-collage.photo-right .inset { margin-right: 0; margin-left: -20%; }
.sqs-collage.photo-right .card { margin-left: 0; margin-right: 20%; }

/* footer: the live site has none visible */
.sqs-footer { height: 0; }

/* hidden heading text for pages whose first visible element is not a heading */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── generator classes ── */
/* the image box: block width capped at the image's own width; height from the editor's ratio; cover from the focal point */
.sqs-image .crop { width: min(100%, var(--w, 100%)); aspect-ratio: var(--ar, auto); overflow: hidden; }
.sqs-image .crop img { width: 100%; height: 100%; object-fit: cover; }
.sqs-image a { display: block; }
.sqs-image > img, .sqs-image > a > img { width: min(100%, var(--w, 100%)); height: auto; }
.sqs-image.pos-center .crop, .sqs-image.pos-center > img, .sqs-image.pos-center > a > img { margin-left: auto; margin-right: auto; }
.sqs-image.pos-right .crop, .sqs-image.pos-right > img { margin-left: auto; }
.sqs-image.pos-left .crop, .sqs-image.pos-left > img { margin-right: auto; }
.sqs-caption { font-size: calc(var(--fs-body) * .85); line-height: 1.6; margin: .6em 0 0; color: var(--ink); }
.sqs-button-wrap.align-left { text-align: left; } .sqs-button-wrap.align-right { text-align: right; }
.sqs-html .sqsrte-large { font-size: var(--fs-large); }
.sqs-html .sqsrte-small { font-size: var(--fs-small); }
.sqs-stacked .item + .item { margin-top: var(--pad, 20px); }
/* grid gallery: n per row (two on phones), the padding as the gap and under the last row, every cell cropped to the aspect */
.sqs-grid .cells { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--pad, 0px); padding-bottom: var(--pad, 0px); }
@media (max-width: 767px) { .sqs-grid .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sqs-grid .wrap { aspect-ratio: var(--gar, 1); overflow: hidden; }
.sqs-grid .wrap img, .sqs-grid .wrap a { width: 100%; height: 100%; display: block; }
.sqs-grid .wrap img { object-fit: cover; }
.sqs-stacked img { width: 100%; height: auto; }
.sqs-slideshow .slides { aspect-ratio: var(--ar, 16 / 9); }
.sqs-slideshow .slide.on { position: absolute; }
.sqs-slideshow .slide img { width: 100%; height: 100%; object-fit: cover; }
.sqs-slideshow.fit .slide img { object-fit: contain; }
.sqs-slideshow.fit .slide { display: block; }
.sqs-marquee { overflow: hidden; white-space: nowrap; }
.sqs-marquee .run { display: flex; width: max-content; align-items: center; gap: .5em; animation: sqs-marquee 40s linear infinite; font-size: calc(.5 * var(--u) + 1rem); font-weight: 500; color: var(--ink); line-height: 1.4; height: round(nearest, 1.4em, 1px); }
@keyframes sqs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sqs-marquee .run { animation: none; } }
.sqs-html p { white-space: pre-wrap; }