/* ==========================================================================
   Arvand Alviri / Cakewalk Labs
   Type scale, colour and spacing mirror the previous Squarespace build.

   Headings use Futura PT and body copy uses Proxima Nova. Those are Adobe
   Fonts and can't be self-hosted, so Jost and Mulish ship as close free
   stand-ins. If you keep an Adobe Fonts kit, add its stylesheet to
   base.njk and the original families take over automatically — they are
   already first in each font stack.
   ========================================================================== */

/* ----------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/jost-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/mulish-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/mulish-latin-300-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */

:root {
  --font-body: 'proxima-nova', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-head: 'futura-pt', 'Jost', 'Century Gothic', 'Futura', var(--font-body);

  --color-bg: #fcfcfc;
  --color-text: #000;
  --color-heading: #222;
  --color-link: #0d1bde;
  --color-link-rule: rgba(13, 27, 222, 0.2);
  --color-muted: #b3b3b3;
  --color-faint: #ddd;
  --color-rule: #e6e5e5;

  --text: 15px;
  --leading: 1.8;

  --site-max: 1200px;
  --content-max: 750px;
  --gutter: 17px;
  --section-space: 50px;
}

/* ----------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 300 var(--text)/var(--leading) var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg, iframe { max-width: 100%; }
img, video { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-head);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

h1 { font-size: 30px; line-height: 1.5; }
h2 { font-size: 24px; }
h3 { font-size: 19.5px; font-weight: 400; }
h4 { font-size: 17px; font-weight: 400; }
h5, h6 { font-size: 15px; font-weight: 400; }

p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

ul, ol { margin: 0 0 15px; padding-left: 1.4em; }
li { margin-bottom: 4px; }

hr { border: 0; border-top: 1px solid var(--color-rule); margin: 34px 0; }

strong, b { font-weight: 700; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
pre { overflow-x: auto; padding: 15px; background: #f2f2f2; }

table { border-collapse: collapse; width: 100%; margin-bottom: 15px; }
th, td { border: 1px solid var(--color-rule); padding: 8px 10px; text-align: left; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- header */

.site-header {
  max-width: var(--site-max);
  margin: 0 auto 40px;
  padding: 10px 20px 0;
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.0238em;
  text-transform: uppercase;
}
.site-title a { color: var(--color-heading); }
.site-title a:hover { text-decoration: none; }

.site-tagline {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.0833em;
  color: var(--color-faint);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav li { margin: 0; }

.site-nav a {
  display: inline-block;
  padding: 4px 0;
  color: var(--color-heading);
  font-family: var(--font-head);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.0769em;
  text-transform: uppercase;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--color-link); text-decoration: none; }
.site-nav a.is-current { color: var(--color-link); }

.nav-toggle, .nav-toggle__button { display: none; }

/* ------------------------------------------------------------------ main */

.site-main {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--section-space) 20px;
}

/* The 750px centred measure Squarespace used for block content. */
.content-column > *,
.page > * {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Rows and card grids stay full width; their columns hold the measure instead. */
.content-column > .row,
.page > .row,
.content-column > .project-grid,
.page > .project-grid {
  max-width: none;
}

/* ------------------------------------------------------------------ rows */

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--gutter) * -1);
}

.row > .col {
  flex: 0 0 auto;
  width: calc(var(--span) / 12 * 100%);
  padding: 0 var(--gutter);
  min-width: 0;
}

.row > .col > * + * { margin-top: 15px; }

/* --------------------------------------------------------------- content */

.align-center { text-align: center; }

.home-lede {
  font-weight: 700;
  padding-bottom: 34px;
}

.home-section { padding-bottom: 34px; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

/* Two centred rows of three equal logo cells. Intrinsic aspect
   ratios stay (Warner is taller, same as Squarespace) but every
   mark is vertically centred so the lockup reads as one strip. */
.page > .client-logos,
.content-column > .client-logos {
  max-width: 600px;
}
.client-logos {
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin-bottom: 8px;
}
.client-logos__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 34px;
  align-items: center;
}
.client-logos figure.image {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-logos figure.image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Row-major project cards so images and titles share a row height
   instead of drifting after a wrapped title in a vertical stack. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 34px;
  row-gap: 25px;
  align-items: start;
}
.project-card figure.image { margin-bottom: 15px; }
.project-card p { margin: 0; }

.spacer { height: var(--space, 25px); }

figure { margin: 0; }

figure.image { margin-bottom: 15px; }
figure.image img { width: 100%; }
figure.image a { display: block; border: 0; }

figure.image figcaption,
figure.video figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-muted);
}
figure.image figcaption p:last-child,
figure.video figcaption p:last-child { margin-bottom: 0; }

figure.quote { margin-bottom: 15px; }
figure.quote blockquote {
  margin: 0;
  padding-left: 15px;
  font-size: var(--text);
  line-height: var(--leading);
}
figure.quote blockquote::before { content: '\201C'; }
figure.quote blockquote::after { content: '\201D'; }
figure.quote figcaption { padding-left: 15px; }

blockquote { margin: 0 0 15px; padding-left: 15px; }

.embed { position: relative; width: 100%; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed--phone {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Placeholder standing in for the two prototype videos. */
figure.video { margin-bottom: 15px; }
.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #ececec;
  background-size: cover;
  background-position: center;
  border: 1px dashed #c4c4c4;
}
.video-placeholder__label {
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
}

/* Body links in prose keep Squarespace's faint underline rule. */
.post__body a:not(.no-rule),
.page a:not(.no-rule):not(.site-nav a) {
  border-bottom: 1px solid var(--color-link-rule);
}
.post__body a:hover, .page a:hover { text-decoration: none; border-bottom-color: var(--color-link); }
.post__body figure a, .page figure a { border-bottom: 0; }

/* --------------------------------------------------------------- gallery */

/* Slideshow galleries become a swipeable scroll-snap strip (no JS). */
.gallery {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-bottom: 12px;
  margin-bottom: 15px;
}
.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
.gallery__slide img { width: 100%; }
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: #ccc; }
.gallery::-webkit-scrollbar-track { background: #efefef; }

/* --------------------------------------------------------- password gate */

.unlock { max-width: 420px; margin: 40px auto 80px; text-align: center; }
.unlock__title { margin-bottom: 12px; }
.unlock__intro { margin-bottom: 20px; }
.unlock__form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.unlock__form input { flex: 1 1 200px; }
.unlock__error { margin-top: 14px; color: #b00020; }
.unlock__help { margin-top: 18px; font-size: 13.5px; color: var(--color-muted); }
.unlock__help a { color: var(--color-muted); border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

/* --------------------------------------------------- legacy project index */

.project { margin-bottom: 68px; }
.project h2 { margin-bottom: 15px; }
.project__desc { margin-bottom: 25px; }
.project__images { display: grid; gap: 25px; }

/* ------------------------------------------------------------------ post */

.post-wrap {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.post { flex: 1 1 auto; min-width: 0; }

.post__header { margin-bottom: 20px; }
.post__title { font-size: 30px; line-height: 1.5; margin-bottom: 6px; }
.post__meta { margin: 0; font-size: 13.5px; color: var(--color-muted); }

.post__footer { margin-top: 34px; }
.taxonomy { margin: 0 0 6px; font-size: 13.5px; color: var(--color-muted); }
.taxonomy__label { text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-head); font-size: 12px; margin-right: 6px; }
.taxonomy a { color: var(--color-muted); border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.taxonomy a:hover { color: var(--color-link); text-decoration: none; }

.post-pagination {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 34px 0 68px;
  padding: 17px 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  font-size: 13.5px;
}
.post-pagination__next { text-align: right; }
.post-pagination a { border: 0; }

.post-sidebar {
  flex: 0 0 240px;
  width: 240px;
}
.post-sidebar h2 { margin-bottom: 20px; }
.post-sidebar ul { list-style: none; margin: 0; padding: 0; }
.post-sidebar li { margin: 0 0 24px; }
.post-sidebar__date {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.post-sidebar__title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
.post-sidebar__title a { color: var(--color-link); }
.post-sidebar__title a:hover { text-decoration: underline; }
.post-sidebar__more {
  margin: 0;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- blog list */

.blog-list { list-style: none; margin: 0; padding: 0; max-width: var(--content-max); }
.blog-list > li { margin: 0 0 50px; }

.blog-list__title { font-size: 30px; line-height: 1.5; margin-bottom: 6px; }
.blog-list__title a { color: var(--color-heading); }
.blog-list__title a:hover { color: var(--color-link); text-decoration: none; }

.blog-list__meta { margin: 0 0 10px; font-size: 13.5px; color: var(--color-muted); }
.blog-list__excerpt { margin: 0 0 8px; }
.blog-list__more { font-family: var(--font-head); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

.archive-intro { margin-bottom: 40px; }
.archive-intro h1 { margin-bottom: 8px; }
.archive-intro p { color: var(--color-muted); font-size: 13.5px; }

.tag-cloud { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; }
.tag-cloud li { margin: 0; }
.tag-cloud a {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag-cloud .count { color: var(--color-muted); }

/* ------------------------------------------------------------------ forms */

.newsletter { margin: 0 auto; max-width: var(--content-max); text-align: center; }
.newsletter__title { margin-bottom: 10px; }
.newsletter__desc { margin-bottom: 15px; }

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.newsletter__form input {
  flex: 1 1 260px;
  max-width: 340px;
}
.newsletter.is-sent .newsletter__form { display: none; }
.newsletter__thanks {
  margin: 0;
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: 0.04em;
}

input[type='text'], input[type='email'], input[type='tel'], textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d6d6d6;
  border-radius: 0;
  background: #fff;
  font: 300 var(--text)/1.5 var(--font-body);
  color: var(--color-text);
}
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-link); outline-offset: 1px; border-color: var(--color-link); }
textarea { resize: vertical; }

button, .button {
  display: inline-block;
  padding: 11px 22px;
  border: 0;
  background: var(--color-heading);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
button:hover, .button:hover { background: var(--color-link); }
button:disabled { opacity: 0.65; cursor: wait; }

.contact-form { max-width: var(--content-max); margin: 0 auto; }
.contact-form .field { margin-bottom: 15px; }
.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.contact-form .req { color: var(--color-link); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 40px 20px 60px;
  text-align: center;
}

.site-footer .social { margin-bottom: 30px; }
.site-footer .social a { display: inline-block; border: 0; }
.site-footer .social svg { fill: var(--color-heading); }
.site-footer .social a:hover svg { fill: var(--color-link); }

.site-footer__legal { margin: 30px 0 0; font-size: 12px; color: var(--color-muted); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .post-wrap { display: block; }
  .post-sidebar {
    width: auto;
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid var(--color-rule);
  }
}

@media (max-width: 767px) {
  .site-header { margin-bottom: 25px; }
  .site-header__inner { flex-direction: column; align-items: stretch; gap: 0; }
  .site-title { font-size: 30px; }

  .nav-toggle__button {
    display: block;
    position: absolute;
    top: 18px;
    right: 20px;
    width: 30px;
    padding: 6px 0;
    cursor: pointer;
  }
  .nav-toggle__button span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: var(--color-heading);
  }
  .site-header { position: relative; }
  .site-nav { display: none; margin-top: 18px; }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .site-nav ul { flex-direction: column; justify-content: flex-start; gap: 0; }
  .site-nav a { padding: 7px 0; font-size: 14px; }

  .site-main { padding: 25px 20px; }

  /* Squarespace stacked every column below ~750px and hid spacer blocks
     used only for desktop centering. Pairing at 50% left a leftover
     column and kept empty gutters in the row. */
  .row > .col { width: 100%; }
  .row > .col:has(> .spacer:only-child) { display: none; }

  .client-logos { max-width: none; }
  .client-logos__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .client-logos figure.image {
    max-width: 40%;
    margin-left: auto;
    margin-right: auto;
  }

  .project-grid { grid-template-columns: 1fr; }

  .post__title, .blog-list__title { font-size: 24px; line-height: 1.35; }
  .post-pagination { flex-direction: column; gap: 12px; }
  .post-pagination__next { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .site-nav, .nav-toggle__button, .post-pagination, .post-sidebar, .newsletter { display: none; }
  body { background: #fff; }
}