/* Colin Brandt portfolio — recreates the Squarespace 7.0 index template look. */

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

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

body {
  margin: 0;
  background: #fcfcfc;
  color: #575757;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a, a:visited { color: #111; text-decoration: none; }
a:hover { color: #444; }

#canvas {
  box-sizing: content-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px;
}

/* ---------- Header ---------- */

#header { margin-bottom: 36px; text-align: center; }

#logo {
  margin: 0;
  height: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 0;
}
#logo a, #logo img { display: block; height: 32px; width: auto; }

.logo-subtitle {
  margin: .7em 0 0;
  color: #000;
  font-size: 16px;
  line-height: 1.6em;
  letter-spacing: 1px;
}

#topNav { margin-top: 18px; font-size: 18px; line-height: 1.6em; }
#topNav ul, #mobileNav ul { list-style: none; margin: 0; padding: 0; }
#topNav li { display: inline-block; margin-right: 30px; }
#topNav li:last-child { margin-right: 0; }
#topNav a {
  color: #999;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6em;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color .14s ease-out;
}
#topNav a:hover, #topNav .active-link > a { color: #111; }

#mobileMenuLink, #mobileNav { display: none; }

/* ---------- Content blocks ---------- */
/* Squarespace blocks have 17px padding (34px between blocks); text inside a
   block uses 16px paragraph spacing. Margin collapsing reproduces both. */

.content > *,
.col > * { margin-top: 0; margin-bottom: 0; }

.content p { margin: 0 0 16px; }

.content h1, .content h2, .content h3, .content h4 { margin: 1em 0 .5em; }

.content h1, .entry-title {
  color: #222;
  font-size: 2em;
  font-weight: 300;
  line-height: 1.5em;
  letter-spacing: .06em;
}
.content h2 {
  color: #222;
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.2em;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.content h3 {
  color: #000;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: .06em;
}
.content h4 { font-size: 1em; font-weight: 600; }

.content ul, .content ol { margin: 0 0 16px; padding-left: 40px; }
.content blockquote { margin: 0 0 16px 40px; }
.content pre {
  margin: 0 0 16px;
  white-space: pre-wrap;
  font-family: monospace, monospace;
  font-size: 16px;
  line-height: 1.9em;
}
.content blockquote.twitter-tweet {
  margin: 16px 0;
  padding-left: 16px;
  border-left: 1px solid currentColor;
}
/* Squarespace drops the padding below a leading single-block row */
.content > .row--after-lead { margin-top: 17px; }

.content a, .content a:visited {
  border-bottom: 1px solid rgba(17, 17, 17, .2);
}
.content a:hover { color: #444; }
.content figure a, .content .gallery a, .content .embed a,
.content .video a { border-bottom: 0; }
.content .embed blockquote a { border-bottom: 1px solid rgba(17, 17, 17, .2); }

.content hr {
  height: 1px;
  border: 0;
  background: #bbb;
  margin: 50px 0;
}

.content > :first-child,
.col > :first-child { margin-top: 0 !important; }
.content > :last-child,
.col > :last-child,
.text > :last-child { margin-bottom: 0 !important; }
.content > hr:first-child { margin-top: 16px !important; }
/* A leading row of single-block columns has no bottom block padding */
.content > .row:first-child { margin-bottom: 0; }
.content > .row:first-child + * { margin-top: 17px !important; }
.content > .row:first-child + hr { margin-top: 33px !important; }
.content > hr:last-child { margin-bottom: 16px !important; }

.content > figure, .col > figure,
.video, .gallery, .audio-player, .embed, .row, .text, .spacer { margin-top: 34px; margin-bottom: 34px; }

#page > .project-content { padding-bottom: 17px; }

/* Image blocks */
figure.image { margin-left: 0; margin-right: 0; padding-bottom: 18px; }
figure.image:has(figcaption), figure.image--nocap { padding-bottom: 0; }
figure.image img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; }
figure.image figcaption { padding-top: 18px; font-size: 12px; line-height: 1.68; color: #575757; }
figure.image figcaption p { margin: 0; padding-bottom: 12px; }

/* Video / embeds */
.video {
  position: relative;
  height: 0;
  padding-bottom: var(--ratio, 56.25%);
  overflow: hidden;
  border-radius: 12px;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed iframe { max-width: 100%; border: 0; }
.sketchfab-embed-wrapper iframe { width: 100%; height: auto; aspect-ratio: 1.778 / 1; }

/* Multi-column rows (Squarespace 12-col grid with 34px gutters) */
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 34px;
}
.col { grid-column: span var(--span, 12); min-width: 0; }

/* Gallery blocks */
.gallery--grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: var(--gap, 20px);
  padding-bottom: var(--gap, 20px);
}
.gallery-item img { display: block; width: 100%; border-radius: 12px; }
.gallery--crop .gallery-item img {
  aspect-ratio: var(--aspect, 1 / 1);
  height: auto;
  object-fit: cover;
}
.gallery--stacked { display: grid; gap: var(--gap, 20px); }
[data-lightbox] img { cursor: zoom-in; }
.gallery-item figcaption { margin-top: .5em; line-height: 1.6em; }

/* Audio player (Squarespace "minimal" design) */
.audio-player {
  position: relative;
  display: flex;
  height: 64px;
  background: rgba(0, 0, 0, .05);
  color: rgba(0, 0, 0, .95);
  font-size: 13px;
  user-select: none;
}
.audio-player audio { display: none; }
.audio-player.no-js audio { display: block; width: 100%; height: 64px; }
.audio-player .ap-action {
  flex: 0 0 60px;
  position: relative;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, .08);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.audio-player .ap-action::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent rgba(0, 0, 0, .95);
}
.audio-player.is-playing .ap-action::before {
  left: 23px;
  width: 14px;
  height: 20px;
  border: 0;
  border-left: 4px solid rgba(0, 0, 0, .95);
  border-right: 4px solid rgba(0, 0, 0, .95);
}
.audio-player .ap-track {
  position: relative;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.audio-player .ap-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: rgba(0, 0, 0, .03);
  pointer-events: none;
}
.audio-player .ap-title {
  position: absolute;
  left: 15px;
  right: 45px;
  top: 23px;
  font-size: 15.6px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-player .ap-time {
  position: absolute;
  right: 15px;
  top: 23px;
  line-height: 18px;
  color: rgba(0, 0, 0, .5);
}

/* Scroll-in image animations (Squarespace per-image presets) */
.js [data-animate] > img, .js [data-animate] > a, .js [data-animate] > figcaption {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
.js [data-animate="fade-in"] > * { transform: none; }
.js [data-animate="slide-up"] > * { transform: matrix(1, 0, 0, 1, 0, 20); }
.js [data-animate="tilt-up"] > * { transform: matrix(.92, .03, 0, .92, 0, 20); }
.js [data-animate="focus-in"] > * { transform: matrix(.92, 0, 0, .92, 0, 0); }
.js [data-animate].is-visible > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-animate] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Index grid ---------- */

#projectThumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.6%;
  row-gap: 32px;
}
#projectThumbs .project { display: block; color: #2e2e2e; }
#projectThumbs .project-image {
  position: relative;
  margin-bottom: 2.6%;
  padding-bottom: 56%;
  height: 0;
}
#projectThumbs .project-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  transition: opacity .14s ease-out;
}
#projectThumbs .project:hover img { opacity: .8; }
#projectThumbs .project-title {
  font-size: 16px;
  line-height: 1.6em;
  letter-spacing: .06em;
  text-align: center;
}

/* Inline project view on index pages */
#projectPages[hidden] { display: none; }
#projectPages .project-nav {
  line-height: 1.9em;
  overflow: hidden;
}
#projectPages .project-page { padding-bottom: 17px; }
#projectNav { float: right; }
#projectNav button {
  border: 0;
  padding: 0;
  background: none;
  color: #575757;
  font: inherit;
  cursor: pointer;
}
#projectNav button:disabled { color: rgba(87, 87, 87, .5); cursor: default; }
.back-to-index, .back-to-index:visited { color: #111; }

/* ---------- TIL (blog) ---------- */

.blog-list { display: flow-root; }
.blog-list article { margin-bottom: 80px; }
.blog-list article + article { border-top: 1px solid transparent; }
.entry-title { margin: 0 0 6.4px; }
.entry-title a, .entry-title a:visited { color: #222; }
.entry-title a:hover { color: #444; }
.meta, .meta a, .meta a:visited { color: #b3b3b3; }
.blog-list header .meta { font-size: .9em; margin-bottom: 16px; }
.blog-list .entry-content { padding-bottom: 17px; }
.entry-footer { margin-top: 16px; padding: 16px 0; }
.entry-footer .meta-row + .meta-row { margin-top: 16px; }
.entry-footer .tags { margin-right: 16px; }
.pagination {
  display: flow-root;
  margin: 34px 0 68px;
  padding: 17px 0;
  border: solid #e6e6e6;
  border-width: 1px 0;
}
.pagination a, .pagination a:visited { display: block; float: left; width: 50%; color: #111; }
.pagination a.next-item { float: right; text-align: right; }
.share { position: relative; }
.share summary { display: inline-block; cursor: pointer; list-style: none; }
.share summary::-webkit-details-marker { display: none; }
.share-list {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  min-width: 138px;
  margin: 0;
  padding: 14px;
  list-style: none;
  background: rgba(254, 254, 254, .9);
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.share-list li { margin: 0; line-height: 30px; }

/* ---------- Footer ---------- */

#footer { margin-top: 50px; text-align: center; }
#footer .copyright { margin: 0; padding-bottom: 3.6px; }
#socialLinks { margin-top: 17px; font-size: 0; line-height: 0; }
#socialLinks a {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0 5px 10px;
  border-radius: 50%;
  overflow: hidden;
}
#socialLinks svg { display: block; width: 100%; height: 100%; fill: #1f1f1f; }
#socialLinks a:hover { opacity: .8; }

/* ---------- Lightbox ---------- */

.lightbox { position: fixed; inset: 0; z-index: 1000; }
.lightbox[hidden] { display: none; }
.lightbox-overlay { position: absolute; inset: 0; background: #000; opacity: .95; }
.lightbox-slide {
  position: absolute;
  inset: 27px 27px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-frame { position: relative; margin: 0; }
.lightbox-frame img {
  display: block;
  max-width: calc(100vw - 54px);
  max-height: calc(100vh - 53px);
  border-radius: 12px;
}
.lightbox-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  color: #fff;
  font-size: 16px;
  line-height: 1.9;
  text-align: left;
  opacity: 0;
  transition: opacity .2s ease-out;
  pointer-events: none;
}
.lightbox-meta:empty { display: none; }
.lightbox button {
  position: absolute;
  border: 0;
  padding: 0;
  background: none;
  color: #ccc;
  cursor: pointer;
}
.lightbox button svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lightbox-close { top: 23px; right: 23px; width: 32px; height: 32px; }
.lightbox-close svg { width: 32px; height: 32px; }
.lightbox-prev, .lightbox-next {
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 6px 11px;
  opacity: 0;
  transition: opacity .2s;
}
.lightbox-prev { left: 27px; }
.lightbox-next { right: 27px; }
.lightbox-prev svg, .lightbox-next svg { width: 22px; height: 32px; }
.lightbox.is-active .lightbox-prev, .lightbox.is-active .lightbox-next,
.lightbox.is-active .lightbox-meta { opacity: 1; }
body.lightbox-open { overflow: hidden; }

/* ---------- Mobile ---------- */

@media only screen and (max-width: 750px) {
  #canvas { padding: 0 20px 20px; }

  #header { margin-bottom: 30px; }
  #topNav { display: none; }

  #mobileNav {
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    margin: 0 0 15px;
  }
  #mobileNav.open { height: auto; visibility: visible; }
  #mobileNav ul { padding-bottom: 16px; border-bottom: 1px solid #ddd; }
  #mobileNav li { text-align: center; }
  #mobileNav a {
    display: block;
    color: rgba(153, 153, 153, .7);
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #mobileNav .active-link > a { color: #999; }

  #mobileMenuLink {
    display: block;
    width: 100%;
    margin: 0 0 25px;
    padding: 0 0 15px;
    border: 0;
    background: none;
    color: #999;
    font: 600 16px/28.8px "Open Sans", Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* Squarespace's mobile grid: one column, slightly wider than the content. */
  #projectThumbs {
    display: flow-root;
    width: 105.2676%;
    margin: -2.6% 0 0 -2.6%;
  }
  #projectThumbs .project { margin-bottom: 20px; }
  #projectPages:not([hidden]) + #projectThumbs { display: none; }

  #footer .copyright { padding: 17px 0 16.6px; }

  .row { display: block; }
  .gallery--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery--instagram {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding-bottom: 0;
  }
  .col:empty, .spacer { display: none; }
  .col:not(:empty) ~ .col:not(:empty) { margin-top: 34px; }

  /* On mobile Squarespace restores the 17px padding on every block. */
  #page > .content, .blog-list .entry-content { padding-top: 17px; }
  .content > .row:first-child { margin-bottom: 34px; }
  .content > .row:first-child + *,
  .content > .row--after-lead { margin-top: 34px !important; }
  .content > .row:first-child + hr { margin-top: 50px !important; }
  .embed { display: flow-root; }
}