/* Daniel Acosta — site stylesheet (written for the static/Supabase version) */

@font-face { font-family: "DA Tomorrow ExtraLight"; src: url("/fonts/tomorrow-extralight-webfont.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "DA Tomorrow ExtraLight Italic"; src: url("/fonts/tomorrow-extralightitalic-webfont.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "DA Tomorrow Medium"; src: url("/fonts/tomorrow-medium-webfont.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "DA Tomorrow SemiBold"; src: url("/fonts/tomorrow-semibold-webfont.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "DA Founders Light"; src: url("/fonts/FoundersGrotesk-Light.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "DA Founders Regular"; src: url("/fonts/FoundersGrotesk-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "DA Founders Medium"; src: url("/fonts/FoundersGrotesk-Medium.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "DA Founders Semibold"; src: url("/fonts/FoundersGrotesk-Semibold.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }

/* aliases used inside imported content */
@font-face { font-family: "Founders Grotesk Light"; src: url("/fonts/FoundersGrotesk-Light.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }

:root {
  --ink: #292a2c;
  --black: #000;
  --muted: #888;
  --link: #919191;
  --link-hover: #020202;
  --overlay-bg: #f5f5f5;
  --f-display: "DA Tomorrow ExtraLight", sans-serif;
  --f-display-medium: "DA Tomorrow Medium", sans-serif;
  --f-text: "DA Founders Light", sans-serif;
  --f-ui: "DA Founders Regular", sans-serif;
  --nav-h: 3.88889rem;
  --nav-pad: 2.22222rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, nav, header, section, figure, strong, em, b, i, u, br {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
header, nav, section, figure { display: block; }
html, body {
  font-size: 18px; line-height: 1.66667; color: var(--ink);
  font-family: Arial, sans-serif; width: 100%; min-height: 100%;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body { overflow-x: hidden; overflow-y: scroll; background: #fff; }
@media (max-width: 767.98px) { html, body { line-height: 1.55556; } }
a { color: var(--link); text-decoration: none; transition: color .2s linear; }
a:hover { color: var(--link-hover); }
ul, ol { margin: 0 0 1.66667rem 48px; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
u { text-decoration: underline; }
img { max-width: 100%; }

/* ---------- typography ---------- */
.page p, .page li { font-family: var(--f-text); font-size: 1.22222rem; line-height: 1.55556; letter-spacing: .0222222rem; }
.page h1, .page h2, .page h3 { font-family: var(--f-display); font-weight: normal; }
.page h4, .page h5, .page h6 { font-family: var(--f-display-medium); font-weight: normal; }
.page h1 { font-size: 3.33333rem; line-height: 3.55556rem; letter-spacing: -.111111rem; }
.page h2 { font-size: 2.55556rem; line-height: 3rem; }
.page h3 { font-size: 1.88889rem; line-height: 2.55556rem; }
.page h4 { font-size: 1.33333rem; line-height: 2rem; }
.page h5 { font-size: 1.11111rem; line-height: 1.77778rem; }
.page h6 { font-size: 1rem; line-height: 1.66667rem; }
@media (min-width: 992px) and (max-width: 1169.98px) {
  .page h1 { font-size: 3.07rem; line-height: 3.27rem; } .page h2 { font-size: 2.35rem; line-height: 2.76rem; } .page h3 { font-size: 1.81rem; line-height: 2.45rem; }
  .page h4 { font-size: 1.28rem; line-height: 1.92rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .page h1 { font-size: 2.87rem; line-height: 3.06rem; } .page h2 { font-size: 2.25rem; line-height: 2.64rem; } .page h3 { font-size: 1.74rem; line-height: 2.35rem; }
  .page h4 { font-size: 1.23rem; line-height: 1.84rem; }
}
@media (min-width: 544px) and (max-width: 767.98px) {
  .page h1 { font-size: 2.73rem; line-height: 2.92rem; } .page h2 { font-size: 2.15rem; line-height: 2.52rem; } .page h3 { font-size: 1.7rem; line-height: 2.3rem; }
  .page h4 { font-size: 1.2rem; line-height: 1.8rem; }
}
@media (max-width: 543.98px) {
  .page h1 { font-size: 2.6rem; line-height: 2.77rem; } .page h2 { font-size: 2.04rem; line-height: 2.4rem; } .page h3 { font-size: 1.66rem; line-height: 2.25rem; }
  .page h4 { font-size: 1.18rem; line-height: 1.77rem; }
}
.is-content h1, .is-content h2, .is-content h3, .is-content h4, .is-content h5, .is-content h6, .is-content p, .is-content blockquote { color: inherit; margin-bottom: 1.66667rem; }
.page .is-content p { margin-bottom: 1.55556em; }
.is-content > div > :last-child, .is-content p:last-child, .is-content h1:last-child, .is-content h2:last-child, .is-content h3:last-child { margin-bottom: 0; }
.font-display, .font_o423tyyq9 { font-family: var(--f-display); font-weight: normal; }
.font_1tnexbfw1 { font-family: "DA Founders Medium", sans-serif; font-weight: normal; }
.font_1o6g7arag { font-family: "DA Founders Semibold", sans-serif; font-weight: normal; }
.font_bgw5ip13n { font-family: var(--f-ui); font-weight: normal; }
.font_gkw9qcv68 { font-family: var(--f-text); font-weight: normal; }
.font-ui { font-family: var(--f-ui); }

/* ---------- navbar ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; z-index: 120; width: 100%;
  height: var(--nav-h); padding: var(--nav-pad) 0; background: #fff;
}
@media (max-width: 767.98px) { .site-nav { position: absolute; } }
.site-nav .nav-inner { position: relative; height: 100%; }
.site-nav .logo, .site-nav .menu-nav, .site-nav .hamburger { position: absolute; height: 100%; line-height: 1; }
.site-nav .logo { left: var(--nav-pad); display: flex; align-items: center; }
.site-nav .logo a { font-family: var(--f-display); font-size: 2.22222rem; color: var(--black); text-transform: uppercase; transition: none; }
.site-nav .menu-nav { right: var(--nav-pad); text-align: right; display: none; }
@media (min-width: 992px) { .site-nav .menu-nav { display: block; } }
.site-nav .menu-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; }
.site-nav .menu-nav li { line-height: 0; }
.site-nav .menu-nav li a { padding-right: 1.66667rem; transition: none; }
.site-nav .menu-nav li:last-child a { padding-right: 0; }
.site-nav .menu-nav li a span { font-family: var(--f-ui); font-size: 1.11111rem; line-height: 1; color: var(--black); }
.site-nav .hamburger { right: var(--nav-pad); top: 0; z-index: 1; display: flex; align-items: center; cursor: pointer; }
@media (min-width: 992px) { .site-nav .hamburger { display: none; } }
.hamburger button {
  position: relative; display: block; width: 1.33333rem; height: 14px; padding: 0; border: 0; background: none; cursor: pointer;
}
.hamburger button::after { content: ""; position: absolute; left: -20px; top: -20px; width: 100%; height: 100%; padding: 20px 40px 20px 20px; box-sizing: content-box; }
.hamburger button span {
  position: absolute; left: 0; display: block; width: 100%; height: 2px; margin-top: 7px; top: 0;
  background: var(--black); transform: translateY(-50%);
}
.hamburger button span::before, .hamburger button span::after {
  content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: inherit; transition: transform .2s;
}
.hamburger button span::before { transform: translateY(-6px); }
.hamburger button span::after { transform: translateY(6px); }
.hamburger:hover button span::before { transform: translateY(-8px); }
.hamburger:hover button span::after { transform: translateY(8px); }
.menu-open .hamburger button span { background: transparent; }
.menu-open .hamburger button span::before { background: var(--black); transform: rotate(45deg); }
.menu-open .hamburger button span::after { background: var(--black); transform: rotate(-45deg); }

/* overlay menu (mobile) */
.overlay-menu {
  position: fixed; inset: 0; z-index: 119; background: var(--overlay-bg);
  display: none; opacity: 0; transition: opacity .25s linear;
}
.menu-open .overlay-menu { display: block; }
.menu-visible .overlay-menu { opacity: 1; }
.overlay-menu nav { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); text-align: center; line-height: 1; }
.overlay-menu ul { list-style: none; margin: 0 auto; padding: 0; }
.overlay-menu li a { display: inline-block; width: 100%; padding: .55556rem 0; }
.overlay-menu li a span { font-family: var(--f-text); font-size: 1.77778rem; color: var(--muted); transition: color .2s linear; }
.overlay-menu li a:hover span, .overlay-menu li.current a span { color: var(--black); }
.menu-open { overflow: hidden; }

/* ---------- layout grid ---------- */
.page { position: relative; background: #fff; }
.sections { margin-top: var(--nav-h); overflow: hidden; }
.content-block { display: flex; flex-direction: column; position: relative; width: 100%; }
.container { display: flex; flex-wrap: wrap; width: 100%; max-width: 1230px; margin: 0 auto; padding: 0 1.66667rem; }
@media (max-width: 991.98px) and (min-width: 768px), (max-width: 543.98px) { .container { padding: 0 1.11111rem; } }
.row { display: flex; flex: 1 1 auto; flex-flow: row wrap; width: 100%; margin: 0 -.83333rem; position: relative; }
.column { display: flex; flex-direction: row; position: relative; padding: 0 .83333rem; overflow-wrap: break-word; }
.column .content-wrapper { width: 100%; position: relative; }
.column-content { width: 100%; position: relative; }
[data-layout="fluid"] .container { max-width: 100%; }
[data-layout="fluid"] .container .row, [data-gutter="no"] .row { margin: 0; }
[data-valign="bottom"] { align-items: flex-end; }
[data-valign="center"] .row { align-items: center; }
[data-justify="center"] .container .row { justify-content: center; }

[data-xl-width="1"] { flex: 0 0 8.33333%; max-width: 8.33333%; width: 8.33333%; }
[data-xl-width="2"] { flex: 0 0 16.6667%; max-width: 16.6667%; width: 16.6667%; }
[data-xl-width="3"] { flex: 0 0 25%; max-width: 25%; width: 25%; }
[data-xl-width="4"] { flex: 0 0 33.3333%; max-width: 33.3333%; width: 33.3333%; }
[data-xl-width="5"] { flex: 0 0 41.6667%; max-width: 41.6667%; width: 41.6667%; }
[data-xl-width="6"] { flex: 0 0 50%; max-width: 50%; width: 50%; }
[data-xl-width="7"] { flex: 0 0 58.3333%; max-width: 58.3333%; width: 58.3333%; }
[data-xl-width="8"] { flex: 0 0 66.6667%; max-width: 66.6667%; width: 66.6667%; }
[data-xl-width="9"] { flex: 0 0 75%; max-width: 75%; width: 75%; }
[data-xl-width="10"] { flex: 0 0 83.3333%; max-width: 83.3333%; width: 83.3333%; }
[data-xl-width="11"] { flex: 0 0 91.6667%; max-width: 91.6667%; width: 91.6667%; }
[data-xl-width="12"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
@media (min-width: 544px) and (max-width: 767.98px) {
  [data-sm-width="4"] { flex: 0 0 33.3333%; max-width: 33.3333%; width: 33.3333%; }
  [data-sm-width="6"] { flex: 0 0 50%; max-width: 50%; width: 50%; }
  [data-sm-width="12"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
  [data-column-mode-sm="single"] .column, [data-column-mode-sm="single"] .masonry-item { flex: 0 0 100%; max-width: 100%; width: 100%; }
}
@media (max-width: 543.98px) {
  [data-xs-width="6"] { flex: 0 0 50%; max-width: 50%; width: 50%; }
  [data-xs-width="12"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
  [data-column-mode-xs="single"] .column, [data-column-mode-xs="single"] .masonry-item { flex: 0 0 100%; max-width: 100%; width: 100%; }
}
.spacer-column { min-height: 0; }

/* ---------- images ---------- */
.content-block img { max-width: 100%; height: auto; font-size: 0; line-height: 0; }
.ce-image { font-size: 0; line-height: 0; }
.ce-image[data-align="center"] { text-align: center; }
.ce-image[data-align="left"] { text-align: left; }
.ce-image img[data-width="grid-width"] { width: 100%; height: auto; }
.lightbox-item, .gg-hover { cursor: zoom-in; }

/* ---------- masonry grids ---------- */
.masonry { position: relative; display: flex; flex-flow: row wrap; align-items: flex-start; }
.masonry .masonry-item { font-size: 0; line-height: 0; opacity: 0; transition: opacity .3s ease; }
.masonry.is-laid-out .masonry-item, .no-js .masonry .masonry-item { opacity: 1; }
.masonry.is-laid-out .masonry-item { position: absolute; top: 0; }
.masonry .masonry-item img { width: 100%; max-width: 100%; height: auto; display: block; }
.masonry[data-gutter="30"] { margin: 0 -15px !important; }
.masonry[data-gutter="30"] > .masonry-item { padding: 0 15px 30px; }
.masonry[data-gutter="24"] { margin: 0 -12px !important; }
.masonry[data-gutter="24"] > .masonry-item { padding: 0 12px 24px; }

/* portfolio thumbs (home) */
.thumb .thumb-inner { position: relative; overflow: hidden; }
.thumb .thumb-inner img { transition: transform .5s; }
.thumb .thumb-inner:hover img, .thumb a:focus-visible .thumb-inner img { transform: scale(1.01); }
.thumb .thumb-hover { position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,.3); opacity: 0; transition: opacity .3s; }
.thumb .thumb-inner:hover .thumb-hover, .thumb a:focus-visible .thumb-hover { opacity: 1; }
.thumb .post-title { font-family: var(--f-ui); font-size: 1rem; line-height: 1 !important; color: var(--black); text-align: center; padding: 1rem 0 0; width: 100%; }
.thumb .pg-title-link { color: var(--black); }

/* gallery grid hover */
.gallerygrid-image { position: relative; display: block; }
.gallerygrid-image .gg-hover { position: absolute; inset: 0; background: rgba(0,0,0,.3); opacity: 0; transition: opacity .3s; }
.gallerygrid-image:hover .gg-hover { opacity: 1; }

/* ---------- work page ---------- */
.work-hero { margin-top: 0; }
.work-hero .work-title { padding: 0; margin: 2.22222rem 0; }
.work-hero .work-title h1 { font-size: 4.44444rem; line-height: 4.44444rem; }
.work-spacer .column { padding-top: .66667rem; padding-bottom: .66667rem; }

/* ---------- project panel ---------- */
.project-panel { padding: 2.22222rem 0; background: transparent; }
.project-panel .container { max-width: 100%; }
.project-panel .row { margin: 0; }
.project-panel .panel-label { font-family: var(--f-text); font-size: 2.22222rem; line-height: 1; color: var(--black); padding: 0 0 2.22222rem; text-align: left; letter-spacing: .0222222rem; }
.project-panel .panel-label span { font-family: var(--f-display); }
.project-panel .pp-thumbs { margin-bottom: -1.11111rem; }
.project-panel .pp-thumb { display: block; font-size: 0; line-height: 0; }
.project-panel .pp-thumb img { width: 100%; max-width: 100%; height: auto; }
.project-panel .pp-title { text-align: center; padding: .222222rem 0 1.11111rem; line-height: .9 !important; font-family: var(--f-text); font-size: 1.22222rem; letter-spacing: .0222222rem; color: var(--black); }
.project-panel .pp-title a { font-family: var(--f-ui); font-size: .888889rem; color: var(--black); transition: none; }

/* ---------- back to top ---------- */
.back-to-top { position: fixed; right: 30px; bottom: 30px; z-index: 118; display: none; }
.back-to-top.is-visible { display: block; }
.back-to-top a { display: block; padding: 10px; cursor: pointer; }
.back-to-top svg { display: block; transition: transform .2s linear; }
.back-to-top:hover svg { transform: scale(1.1); }

/* ---------- page fade in ---------- */
.js .page { opacity: 0; transition: opacity .35s ease; }
.js .page.is-ready { opacity: 1; }

/* ---------- photoswipe tweaks ---------- */
.pswp__bg { background: #000; }
.pswp__button--share, .pswp__button--fs, .pswp__button--zoom { display: none !important; }