/* figtree-latin-ext-wght-normal */
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* figtree-latin-wght-normal */
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Recreation of the Squarespace "Avenue" template as configured on archieleeming.com.
   Values come from DESIGN.md / measured computed styles. */

/* ---- FONT: change this one line to swap fonts (see README) ---- */
:root {
  --font-body: 'Figtree Variable', 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Figtree sets ~3% wider than Proxima Nova; this tightens uppercase labels (nav, thumbnail titles,
     buttons) so they wrap like the original. Set to 0 when using real Proxima Nova. */
  --tracking-adjust: -0.03em;

  --text: #121212;
  --link: #111111;
  --link-hover: #444444;
  --nav: #474747;
  --nav-active: #111111;
  --thumb-title: #404040;
  --button: #272727;
  --rule: #dddddd;
  --gutter: 17px;
}

*, *::before, *::after { box-sizing: content-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--text);
  font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.8em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { border: 0; }
a, a:visited { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }

h1, h2, h3 { margin: 1em 0 .5em; font-family: var(--font-body); }
h1 { font-size: 1.8em; font-weight: 700; line-height: 1.2em; letter-spacing: 0; color: var(--text); }
h2 { font-size: 1.6em; font-weight: 400; line-height: 1.2em; letter-spacing: .06em; text-transform: uppercase; color: #222; }
h3 { font-size: 1.3em; font-weight: 400; line-height: 1.2em; letter-spacing: .06em; text-transform: uppercase; color: #d1d1d1; }
p { margin: 0 0 1em; font-size: 14px; line-height: 1.8em; }
ul, ol { margin: 1em 0; font-size: 14px; line-height: 1.8em; }
nav ul { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 700; }

/* ---- page frame ---- */
#canvas { max-width: 1000px; margin: 10px auto; padding: 75px; }
#header { margin-bottom: 50px; }
#header::after, #page::after, #footer::after { content: ""; display: table; clear: both; }
#logo, #topNav { float: left; width: 100%; text-align: center; }
.logo { display: inline-block; height: 100px; margin: 0; line-height: 0; }
.logo img { display: block; max-width: 100%; max-height: 100%; width: 150px; height: 100px; }

#topNav { margin-top: 25px; position: relative; z-index: 890;
  font-size: 13px; line-height: 1.6em; letter-spacing: calc(1px + var(--tracking-adjust)); text-transform: uppercase; font-weight: 400; }
#topNav, #topNav nav, #topNav ul { height: 21px; }
#topNav nav, #topNav ul, #topNav li { display: inline-block; vertical-align: top; }
#topNav li { position: relative; margin-right: 30px; }
#topNav li:last-child { margin-right: 0; }
#topNav a { display: inline-block; vertical-align: top; margin-top: 1px; line-height: 18px; color: var(--nav); }
#topNav .active-link > a, #topNav a:hover { color: var(--nav-active); }

#mobileMenuLink, #mobileNav { display: none; }

#page { position: relative; }
#page::before { content: ""; display: table; }
#footer { margin-top: 46px; }
#footerBlock { min-height: 34px; }

/* ---- home: index thumbnails ---- */
/* ---- story footer: Back to Stories / prev / next (Avenue index view) ---- */
.project-controls { clear: both; font-size: 14px; line-height: 25.2px; }
.project-controls::after { content: ""; display: table; clear: both; }
#projectNav { float: right; color: #121212; }
#projectNav a, #projectNav a:visited { color: #121212; }
#projectNav .disabled { color: rgba(18,18,18,.5); cursor: default; }
.project-controls .back-to-stories { color: #111; }
#projectThumbs { clear: both; }
#projectThumbs > .wrapper { width: 104%; margin-left: -4%; margin-top: 0; }
#projectThumbs > .wrapper::after { content: ""; display: table; clear: both; }
#projectThumbs .project { float: left; margin-left: 3.84615385%; margin-top: 4%; width: 29.48717949%; display: block; }
#projectThumbs .project:nth-child(3n+1) { clear: left; }
#projectThumbs .project-image { background: #000; margin-bottom: 4%; }
#projectThumbs .intrinsic { position: relative; padding-bottom: 70%; overflow: hidden; line-height: 0;
  transition: opacity .14s ease-out; }
#projectThumbs .intrinsic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#projectThumbs .project-title { font-size: 12px; line-height: 1.6em; letter-spacing: calc(.06em + var(--tracking-adjust)); text-transform: uppercase;
  font-weight: 400; text-align: center; color: var(--thumb-title); }

/* ---- blocks (Squarespace layout engine equivalent) ---- */
.layout { margin: 0 calc(-1 * var(--gutter)); }
.block { padding: var(--gutter); position: relative; }
.layout > .block:first-child { padding-top: 0; }
.html-content > *:first-child { margin-top: 0; }
.html-content > *:last-child { margin-bottom: 0; }
.html-content p:empty::before { content: "\200b"; } /* Squarespace keeps empty paragraphs as blank lines */
.html-content a { border-bottom: 1px solid rgba(17,17,17,.2); }
.html-content a:hover { border-color: var(--link-hover); }
.html-content *:not(h1):not(h2):not(h3) { overflow-wrap: break-word; }

.image-block figure { margin: 0; }
.image-block .frame { position: relative; overflow: hidden; line-height: 0; }
.image-block .frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.image-block a.frame { display: block; border: 0; }
.image-block figcaption { padding-top: 18px; }
.image-block figcaption p { font-size: 14px; line-height: 1.68em; text-align: center !important; margin: 0 0 1em; }
.image-block figcaption a { border-bottom: 1px solid rgba(17,17,17,.2); }

.button-block { text-align: center; }
.button {
  display: inline-block; padding: 21px 34px; border: 2px solid var(--button); background: transparent; color: var(--button) !important;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: calc(1px + var(--tracking-adjust)); text-transform: uppercase; line-height: 21px;
  transition: .1s background-color linear, .1s color linear; cursor: pointer;
}
.button:hover { background: var(--button); color: #fff !important; }

/* lazy fade-in like Squarespace */
img.fade { opacity: 0; transition: opacity .3s ease-out; }
img.fade.loaded { opacity: 1; }
.no-js img.fade { opacity: 1; }

/* ---- gallery block (grid) ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--gap, 24px); padding-bottom: var(--gap, 24px); }
.gallery-grid .slide { position: relative; padding-bottom: 66.6667%; overflow: hidden; line-height: 0; display: block; border: 0; }
.gallery-grid .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-grid button.slide { margin: 0; padding-top: 0; padding-left: 0; padding-right: 0; border: 0; background: none; cursor: pointer; width: 100%; }

/* ---- lightbox (light theme) ---- */
.lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(255,255,255,.98); display: none; }
.lightbox.open { display: block; }
.lightbox img { position: absolute; inset: 10px 66px; width: calc(100% - 132px); height: calc(100% - 20px); object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; cursor: pointer; color: #bbb; font: 300 40px/1 var(--font-body); padding: 10px; }
.lightbox button:hover { color: #444; }
.lightbox .lb-close { top: 4px; right: 12px; font-size: 26px; }
.lightbox .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
body.lightbox-open { overflow: hidden; }

/* ---- gallery page slideshow (Alang) ---- */
#slideshow { position: relative; height: 500px; width: 100%; overflow: hidden; }
#slideshow .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; cursor: pointer; text-align: center; }
#slideshow .slide.active { opacity: 1; z-index: 1; }
#slideshow .slide img { height: 100%; width: 100%; object-fit: contain; display: block; }
#tinyThumbControls { text-align: center; line-height: 0; padding-top: 3px; }
#tinyThumbControls button { display: inline-block; opacity: .4; margin: 0 1.5px 3px; padding: 0; border: 0; background: none; cursor: pointer; }
#tinyThumbControls button.active { opacity: 1; }
#tinyThumbControls img { height: 20px; width: auto; display: block; }

/* ---- mobile (Avenue breakpoint 750px) ---- */
@media only screen and (max-width: 750px) {
  #canvas { margin: 0 auto; padding: 0 20px 20px; }
  #header { margin-bottom: 30px; }
  #logo { float: none; }
  .logo { display: block; text-align: center; height: 100px; }
  .logo img { display: inline; }
  #header #topNav { display: none; }

  #mobileMenuLink { display: block; margin: 0 0 25px; padding: 0 0 15px; text-align: center;
    font-size: 13px; line-height: 1.6em; letter-spacing: calc(1px + var(--tracking-adjust)); text-transform: uppercase; }
  #mobileMenuLink button { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; letter-spacing: inherit; text-transform: inherit; font-size: 16px; color: var(--nav); }
  #mobileNav { display: block; height: 0; overflow: hidden; margin: 0 0 15px; transition: height .2s ease; }
  #mobileNav .wrapper { padding: 0 0 1em; border-bottom: 1px solid var(--rule); }
  #mobileNav li { display: block; text-align: center; }
  #mobileNav a { display: block; text-align: center; font-size: 16px; line-height: 2.5em; letter-spacing: calc(1px + var(--tracking-adjust));
    text-transform: uppercase; color: rgba(71,71,71,.7); }
  #mobileNav .active-link a { color: var(--nav); }

  .block, .layout > .block:first-child { padding-top: 17px; padding-bottom: 17px; }

  #projectThumbs > .wrapper { margin-top: -4%; }
  #projectThumbs .project { width: 46.15384615%; }
  #projectThumbs .project:nth-child(3n+1) { clear: none; }
  #projectThumbs .project:nth-child(odd) { clear: left; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  #slideshow { height: auto; overflow: visible; }
  #slideshow .slide { position: static; opacity: 1; margin-bottom: 20px; cursor: default; }
  #slideshow .slide img { height: auto; }
  #tinyThumbControls { display: none; }
  .lightbox img { inset: 50px 10px; width: calc(100% - 20px); height: calc(100% - 100px); }
  .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 0; transform: none; }
}