/* cinziac.net
   Sizes, colours and the 8/24-column grid. */

/* ---------- Fonts (open-source, self-hosted) ---------- */
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/karla-latin.woff2) format('woff2'); 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; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/karla-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 200 800; font-display: swap; src: url(/fonts/karla-italic-latin.woff2) format('woff2'); 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; }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 200 800; font-display: swap; src: url(/fonts/karla-italic-latin-ext.woff2) format('woff2'); 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; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/nunito-sans-latin.woff2) format('woff2'); 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; }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/nunito-sans-latin-ext.woff2) format('woff2'); 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; }

/* ---------- Base ---------- */
:root {
  --gutter: 4vw;          /* page side margin on desktop */
  --m-gutter: 6vw;        /* page side margin on phones */
  --max-w: 1800px;
  --light: #f5f5f5;
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* header height: 1vw padding above and below the site title line */
  --hdr-h: calc(2vw + 1.2 * min(calc(.6vw + 1rem), 25.8px));
}
@media screen and (max-width: 799px), only screen and (pointer: coarse) and (max-width: 1024px) {
  :root { --hdr-h: calc(12vw + 37px); }
}
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--light); color: #000;
  font-family: Karla, sans-serif; font-weight: 200; font-size: 1rem; line-height: 1.5em; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.page-works { background: #fff; }
body.page-home { background: #000; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 1rem 0; }
strong { font-weight: 700; }
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -15000px; top: 23px; z-index: 100; padding: 18px 30px; background: #d9d9d9; color: #000; font-family: 'Nunito Sans', sans-serif; }
.skip:focus { left: 23px; }

/* Responsive type: size value v -> pixels, scaling with the window. */
h1, h2, h3, h4, .large, .small, .hdr-title-text, .newsletter-title, .marquee, .fs-v {
  font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * 21.6px + 1rem), calc(var(--v) * 1rem)));
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  h1, h2, h3, h4, .large, .small, .hdr-title-text, .newsletter-title, .marquee, .fs-v {
    font-size: calc((var(--v) - 1) * .012 * min(100vh, 900px) + 1rem);
  }
}
h1, h2, h3, h4 {
  font-weight: 200; letter-spacing: -.02em; margin: 2rem 0;
  line-height: calc(1.2em * (1 + (1 - var(--v)) / 25));
}
h1 { --v: 4; } h2 { --v: 2.8; } h3 { --v: 2.2; } h4 { --v: 1.6; }
.large { --v: 1.4; line-height: 1.5em; }
.small { --v: .9; line-height: 1.5em; }
.center, .center p { text-align: center; }
/* Text sizes chosen in /admin/layout (footer parts): a value on the same scale as the headings
   and text above, set as --v on the element. From 1.6 up it is set like a heading. */
.fs-head { font-weight: 200; letter-spacing: -.02em; line-height: calc(1.2em * (1 + (1 - var(--v)) / 25)); }
.fs-text { letter-spacing: 0; line-height: 1.5em; }
.site-footer .fs-bold { font-weight: 700; }
.site-footer .fs-italic { font-style: italic; }
.site-footer .fs-underline, .site-footer .fs-underline a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.site-footer .fs-no-underline, .site-footer .fs-no-underline a { text-decoration: none; }

/* Links inside text: thin underline like the original */
.txt a, .newsletter-head p a, figcaption a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* ---------- Header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  color: #000; background: transparent;
  transition: background-color 140ms ease-in-out 140ms, transform 140ms ease-in-out;
}
.hdr[data-theme="black"] { color: #fff; }
.hdr.is-solid[data-theme="light"] { background: var(--light); }
.hdr.is-solid[data-theme="white"] { background: #fff; }
.hdr.is-solid[data-theme="black"] { background: #000; }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr-bar { position: relative; z-index: 2; padding: 1vw var(--gutter); transition: padding 140ms ease-in-out; }
.hdr-in { display: flex; align-items: center; width: 100%; }
.hdr-title-nav { display: flex; flex: 1 0 67%; align-items: center; flex-wrap: nowrap; }
.hdr-nav { flex: 1 1 33%; width: 33%; display: flex; }
.hdr-link {
  font-size: 1rem; line-height: 1.5em; text-decoration: none; padding: .1em 0; margin-right: 2.1vw;
  white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: 0 100%;
}
.hdr-link.is-active, .hdr-link:hover { background-size: 100% 1px; }
.hdr-title { flex: 1 1 34%; width: 34%; text-align: center; }
.hdr-actions { flex: 1 1 33%; width: 33%; }
.hdr-title-text { --v: 1.5; margin: 0; font-weight: 200; letter-spacing: -.02em; line-height: 1.2em; }
.hdr-title-text a { text-decoration: none; }
.hdr-mobile { display: none; }

/* Phone header: from 799px down, and on touch screens up to 1024px. */
@media screen and (max-width: 799px), only screen and (pointer: coarse) and (max-width: 1024px) {
  .hdr-bar { padding: 6vw var(--m-gutter); }
  .hdr.is-solid .hdr-bar { padding-top: min(6vw, 2vmax); padding-bottom: min(6vw, 2vmax); }
  .hdr-desktop { display: none; }
  .hdr-mobile { display: flex; }
  .hdr-mobile .hdr-title { flex: 1 1 auto; width: auto; text-align: left; }
  .hdr-mobile .hdr-title-text { --v: 1; }
}
.hdr-burger { flex: 0 0 50px; width: 50px; display: flex; justify-content: flex-end; align-items: flex-end; }
.burger { position: relative; width: 47px; height: 37px; padding: 1px 6px; border: 0; background: none; cursor: pointer; }
.burger-inner { position: relative; display: block; width: 35px; height: 35px; }
.burger-inner span {
  position: absolute; top: 0; bottom: 0; left: 0; margin: auto; display: block; width: 100%; height: 1px;
  background: currentColor; transition: transform 250ms cubic-bezier(.2, .6, .3, 1), width 250ms cubic-bezier(.2, .6, .3, 1);
}
.burger-inner .top-bun { transform: translateY(-5.5px); }
.burger-inner .bottom-bun { transform: translateY(5.5px); }
.menu-open .burger-inner .top-bun { transform: translateX(3.5px) rotate(-135deg); width: 28px; }
.menu-open .burger-inner .bottom-bun { transform: translateX(3.5px) rotate(135deg); width: 28px; }

/* Full-screen phone menu */
.menu {
  position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; text-align: center;
  color: #fff; opacity: 0; visibility: hidden; pointer-events: none;
  transition: visibility 600ms var(--ease), opacity 400ms var(--ease);
}
.menu-bg { position: absolute; inset: 0; background: #000; }
.menu-list { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: var(--hdr-h, 84px); }
.menu-item { padding: 0 var(--gutter); }
.menu-item a {
  display: inline-flex; margin: 3vw 5vw; font-size: 8.5vmin; line-height: 1em; font-weight: 200;
  text-decoration: none; transition: opacity 250ms var(--ease);
}
.menu-item a:hover { opacity: .9; }
.menu-open .menu { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-open .hdr { color: #fff; background: transparent; transform: none; }
.menu-open { overflow: hidden; }

/* ---------- Sections and the fluid grid ---------- */
.sec { position: relative; display: flex; align-items: center; background: var(--light); color: #000; }
.sec.t-white { background: #fff; }
.sec.t-black { background: #000; color: #fff; }
.sec > .wrap { position: relative; width: 100%; }
.sec--small { min-height: 33vh; }
.sec--small > .wrap { padding: 3.3vmax 0; }
.sec--medium { min-height: 66vh; }
.sec--medium > .wrap { padding: 6.6vmax 0; }
/* The first section sits under the transparent header. */
main > .sec:first-child { padding-top: var(--hdr-h, 65px); }
.sec-bg { position: absolute; inset: 0; overflow: hidden; }

.fe {
  --gap: 11px; --cols: 8;
  --gg: calc(var(--m-gutter) - var(--gap));
  --cell: calc((var(--max-w) - var(--gap) * (var(--cols) - 1)) / var(--cols));
  display: grid; position: relative;
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  grid-template-columns: minmax(var(--gg), 1fr) repeat(var(--cols), minmax(0, var(--cell))) minmax(var(--gg), 1fr);
  row-gap: var(--gap); column-gap: var(--gap);
  overflow-x: clip;
}
@media (min-width: 768px) {
  .fe {
    --cols: 24;
    --gg: calc(var(--gutter) - var(--gap));
    --cw: min(var(--max-w), calc(100vw - var(--gutter) * 2));
    grid-template-rows: repeat(var(--rows-d), minmax(calc(var(--cw) * .0215), auto));
  }
}
.fe-b { grid-area: var(--m); z-index: var(--z, 0); display: flex; flex-direction: column; justify-content: center; min-width: 0; position: relative; }
.fe-b.va-top { justify-content: flex-start; }
.fe-b.va-bottom { justify-content: flex-end; }
@media (min-width: 768px) {
  .fe-b { grid-area: var(--d); }
  .fe-b.vad-top { justify-content: flex-start; }
  .fe-b.vad-center { justify-content: center; }
  .fe-b.vad-bottom { justify-content: flex-end; }
}
.fe-c { position: relative; }
.txt .fe-c > :first-child { margin-top: 0; }
.txt .fe-c > :last-child { margin-bottom: 0; }
.txt p { white-space: pre-wrap; }
.large-text p { --v: 1.4; line-height: 1.5em; }
.large-text p { font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * 21.6px + 1rem), calc(var(--v) * 1rem))); }
@media screen and (max-width: 767px) and (orientation: portrait) {
  .large-text p { font-size: calc((var(--v) - 1) * .012 * min(100vh, 900px) + 1rem); }
}

/* Statement / quote sections: large text, then an optional normal-size line */
.txt .fe-c > .large-text > :first-child { margin-top: 0; }
.txt .fe-c > .large-text:last-child > :last-child { margin-bottom: 0; }

/* Lists on the About page (bullet hanging 40px to the left) */
.rte-list { margin: 1rem 0; padding: 0 0 0 40px; }
.rte-list li { list-style: none; }
.rte-list li > * { margin: .5em 0; }
.rte-list li > :first-child::before {
  content: "\2022"; display: inline-block; margin-left: -40px; min-width: 40px; padding-right: 10px;
  text-align: right; box-sizing: border-box;
}

/* Image blocks fill their grid area ("fill"), or sit inside it at their own shape ("fit") */
.img-block > .fe-c { position: absolute; inset: 0; }   /* the picture never stretches its grid rows */
.img-block .fe-c > a, .img-block .fe-c > .fill, .img-block picture { display: block; width: 100%; height: 100%; }
.img-block img { width: 100%; height: 100%; object-fit: cover; }
.img-block.fit-contain img { object-fit: contain; }
.tile { cursor: pointer; }

/* ---------- Background video ---------- */
.vbg { position: absolute; inset: 0; overflow: hidden; background: #000; }
.vbg-poster, .vbg picture, .vbg-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vbg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* The still image stays on top until the video is really playing, so a phone never shows a play button. */
.vbg--native picture { z-index: 1; transition: opacity .4s ease; }
.vbg--native.is-playing picture { opacity: 0; }
.vbg-video::-webkit-media-controls, .vbg-video::-webkit-media-controls-start-playback-button,
.vbg-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.vbg--vimeo iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: 0; transform: translate(-50%, -50%); pointer-events: none; }

/* ---------- Project title marquee ---------- */
.marquee-block { overflow: visible; }
.marquee { --v: 8; overflow: hidden; width: 100%; font-weight: 200; letter-spacing: -.02em; line-height: 1.4; white-space: nowrap; }
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-item { padding-right: .5em; }
.marquee.is-running .marquee-track { animation: marquee var(--dur, 30s) linear infinite; }
@keyframes marquee { to { transform: translateX(calc(-1 * var(--dist, 0px))); } }
@media (prefers-reduced-motion: reduce) { .marquee.is-running .marquee-track { animation: none; } }

/* ---------- Gallery (two-column masonry) ---------- */
.gallery-sec { display: flow-root; }
/* Gallery spacing grows with the window: "gutter" × 0.05% of the width */
.masonry { --space: calc(var(--gutter, 4) * .05vw); position: relative; padding: 0 var(--space); display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); column-gap: var(--space); }
.masonry.is-laid-out { display: block; }
.masonry.is-laid-out .m-item { position: absolute; }
.m-item { margin: 0; }
.masonry:not(.is-laid-out) { row-gap: var(--space); }
.m-item img { width: 100%; height: auto; }
.m-link { display: block; cursor: zoom-in; }
.m-item figcaption { padding: 15px 0; max-width: 675px; }
.m-item figcaption p { margin: 0; font-size: 14px; line-height: 1.5em; }
.js .m-item { opacity: 0; transform: translateY(25px); }
.js .m-item.is-in { animation: fade-up 800ms var(--ease) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: none; } }

/* Slideshow gallery (Daemon Saver) */
.slideshow {
  display: flex; flex-direction: column; max-width: var(--max-w); margin: 0 auto 150px;
  padding: var(--gutter) var(--gutter) 0; height: calc(100vh + 2 * var(--gutter)); user-select: none;
}
@media screen and (max-width: 767px) { .slideshow { padding: 6vw 6vw 0; height: 100vw; } }
.slideshow-wrap { position: relative; flex: 1 1 auto; width: 100%; }
.slideshow-list { position: absolute; top: 0; bottom: 0; left: 3vmax; right: 3vmax; }
.slide { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; visibility: hidden; }
.slide[data-active] { visibility: visible; }
.slide-src { width: 100%; height: 100%; overflow: hidden; opacity: 0; transform: translateX(10%); }
.slide[data-from="left"] .slide-src { transform: translateX(-10%); }
.slide[data-active][data-in] .slide-src { opacity: 1; transform: none; transition: transform 800ms cubic-bezier(.2, .6, .3, 1), opacity 800ms cubic-bezier(.2, .6, .3, 1); }
.slide[data-leaving] { visibility: visible; }
.slide[data-leaving] .slide-src { opacity: 0; transform: none; transition: opacity 800ms cubic-bezier(0, 0, .2, 1); }
.slide-src picture, .slide-src img { display: block; width: 100%; height: 100%; object-fit: contain; }
.slideshow-controls { position: absolute; inset: 0; display: flex; justify-content: space-between; pointer-events: none; }
.slideshow-btn {
  pointer-events: all; align-self: center; width: 3vmax; display: flex; justify-content: center; border: 0; background: none;
  padding: 0; color: #000; opacity: .75; cursor: pointer; transition: opacity 600ms var(--ease);
}
.slideshow-btn:hover { opacity: 1; }
.slideshow-btn svg { box-sizing: content-box; width: 9px; height: 16px; padding: 8px 10px 8px 8px; fill: none; stroke: currentColor; stroke-miterlimit: 10; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 400ms; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-bg { position: absolute; inset: 0; background: var(--light); opacity: .9; }
.lightbox-stage { position: absolute; inset: 72px calc(3vw + 65px); }
.lightbox-stage img { width: 100%; height: 100%; object-fit: contain; transition: opacity 250ms cubic-bezier(.2, .6, .3, 1), transform 250ms cubic-bezier(.2, .6, .3, 1); }
.lightbox-btn { position: absolute; border: 0; background: none; padding: 0; color: #000; opacity: .75; cursor: pointer; transition: opacity 600ms var(--ease); }
.lightbox-btn:hover { opacity: 1; }
.lightbox-btn svg { display: block; fill: none; stroke: currentColor; stroke-width: 4px; }
.lightbox-close { top: 1.5vw; right: 1.5vw; padding: 1px 6px; }
.lightbox-close svg { width: 20px; height: 20px; stroke-width: 4px; }
.lightbox-prev, .lightbox-next { top: 50%; width: 13px; height: 24px; margin-top: -12px; }
.lightbox-prev { left: 3vw; } .lightbox-next { right: 3vw; }
.lightbox-prev svg, .lightbox-next svg { width: 13px; height: 24px; stroke-width: 1px; }
@media (max-width: 767px) {
  .lightbox-stage { inset: 72px 0; }
  .lightbox-close { top: 3vw; right: 3vw; }
  .lightbox-prev, .lightbox-next { display: none; }
}

/* ---------- Available works: a thin line above each work and above the contact line ---------- */
.avw-rule > .wrap::before {
  content: ""; position: absolute; top: 0; left: var(--m-gutter); right: var(--m-gutter);
  border-top: 1px solid rgba(0, 0, 0, .12);
}
@media (min-width: 768px) { .avw-rule > .wrap::before { left: var(--gutter); right: var(--gutter); } }
.avw-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.avw-line { margin: 0; }
.txt h3 + .avw-stock { margin-top: -1rem; }
.avw-buy { margin-top: 1.5rem; }
.avw-acquire {
  display: inline-block; padding: .8rem 2rem; border: 1px solid currentColor;
  text-decoration: none !important; transition: background-color .1s linear, color .1s linear;
}
.avw-acquire:hover, .avw-acquire:focus-visible { background: #000; color: var(--light); }

/* ---------- Footer ---------- */
.site-footer .sec { min-height: 0; }
.site-footer h3 { margin: 0; }
.social { display: flex; gap: 8px; }
.social a { display: block; width: 32px; height: 32px; background: #000; }
.social svg { display: block; width: 32px; height: 32px; fill: #fff; }
.newsletter-head { margin: 0; }
.newsletter-title { --v: 2.2; margin: 0 0 1rem; line-height: 1.2em; }
.newsletter-title a { text-decoration: none; }
.newsletter-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.newsletter-head p { margin: 15px 0 0; }

/* ---------- Entrance animations (headings scale in, text fades in) ---------- */
.js .anim-scale { opacity: 0; transform: scale(.9); transition: opacity .65s ease, transform .65s ease; transition-delay: var(--delay, 0s); }
.js .anim-fade { opacity: 0; transition: opacity .65s ease; transition-delay: var(--delay, 0s); }
.js .anim-scale.is-in { opacity: 1; transform: scale(1); }
.js .anim-fade.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .anim-scale, .js .anim-fade, .js .m-item { opacity: 1; transform: none; transition: none; animation: none; }
}