/* omoss.io — site styles. Metrics mirror the original Semplice theme:
   18px root, 1170px content grid, 30px gutters (10px below 1170). */

@font-face { font-family: 'GTCinetype'; src: url('fonts/GTCinetypeRegular.woff2') format('woff2'), url('fonts/GTCinetypeRegular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GTCinetypeLight'; src: url('fonts/GTCinetypeLight.woff2') format('woff2'), url('fonts/GTCinetypeLight.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'GTCinetypeBold'; src: url('fonts/GTCinetypeBold.woff2') format('woff2'), url('fonts/GTCinetypeBold.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
  --bg: #000; --fg: #fff; --accent: #46ea9d; --muted: #ccc;
  --font-body: 'GTCinetypeLight', system-ui, sans-serif;
  --font-head: 'GTCinetypeBold', system-ui, sans-serif;
  --font-ui: 'GTCinetype', system-ui, sans-serif;
  --container: 1230px;
  --pad: 1.6667rem;
  --gutter: 1.6667rem;
  --nav-h: 3.889rem;
}
@media (max-width: 1169.98px) { :root { --gutter: 10px; } }
@media (max-width: 991.98px) { :root { --pad: 1.1111rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.5556;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
figure { margin: 0; }

/* ---------- typography ---------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; margin: 0 0 1.6667rem; color: inherit; }
h1 { font-size: 2.3333rem; line-height: 3rem; }
h2 { font-size: 2rem; line-height: 2.6667rem; }
h3 { font-size: 1.5556rem; line-height: 2.2222rem; }
h4 { font-size: 1.3333rem; line-height: 2rem; }
h5 { font-size: 1.1111rem; line-height: 1.7778rem; }
h6 { font-size: 1rem; line-height: 1.6667rem; }
p, li { font-size: 1rem; line-height: 1.6667; }
p, blockquote, ul, ol { margin: 0 0 1.6667rem; }
.rich > :last-child { margin-bottom: 0; }
@media (max-width: 1169.98px) { h1 { font-size: 2.15rem; line-height: 2.76rem; } h2 { font-size: 1.84rem; line-height: 2.45rem; } h3 { font-size: 1.49rem; line-height: 1.92rem; } h4 { font-size: 1.28rem; line-height: 1.92rem; } }
@media (max-width: 991.98px) { h1 { font-size: 2.01rem; line-height: 2.58rem; } h2 { font-size: 1.76rem; line-height: 2.35rem; } h3 { font-size: 1.43rem; line-height: 1.84rem; } h4 { font-size: 1.23rem; line-height: 1.84rem; } }
@media (max-width: 767.98px) { h1 { font-size: 1.91rem; line-height: 2.46rem; } h2 { font-size: 1.68rem; line-height: 2.24rem; } h3 { font-size: 1.4rem; line-height: 1.8rem; } h4 { font-size: 1.2rem; line-height: 1.8rem; } }
@media (max-width: 543.98px) { h1 { font-size: 1.82rem; line-height: 2.34rem; } h2 { font-size: 1.6rem; line-height: 2.13rem; } h3 { font-size: 1.37rem; line-height: 1.76rem; } h4 { font-size: 1.17rem; line-height: 1.76rem; } }

a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted #888; transition: border-color .2s, color .2s; }
a:hover { border-bottom-color: var(--accent); }
a.plain, .plain { border: 0; }

/* ---------- grid ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--gutter) / -2); }
.col { flex: 0 0 auto; width: calc(100% / 12 * var(--span, 12)); padding: 0 calc(var(--gutter) / 2); min-width: 0; }
.sec.fluid > .container { max-width: none; }
.sec.fluid > .container, .sec.nogap > .container { padding: 0; }
.sec.fluid .row, .sec.nogap .row { margin: 0; }
.sec.nogap .col, .sec.fluid .col { padding: 0; }
.sec.v-center .row { align-items: center; }
@media (max-width: 767.98px) { .stack-sm .col { width: 100%; } }
@media (max-width: 543.98px) { .stack-xs .col, .stack-sm .col { width: 100%; } }

/* ---------- nav ---------- */
header.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); }
header.nav .container { display: flex; align-items: center; justify-content: space-between; height: calc(var(--nav-h)); }
.logo { font-family: var(--font-head); font-size: 1.3333rem; text-transform: uppercase; color: #fff; line-height: 1; }
.logo:hover { color: var(--accent); }
header nav { display: flex; gap: 1.6667rem; }
header nav a { border: 0; font-family: var(--font-body); font-size: .8889rem; text-transform: uppercase; color: var(--muted); line-height: 1; }
header nav a[aria-current], header nav a:hover { color: #fff; }
header nav a:hover { color: var(--accent); }
.burger { display: none; background: none; border: 0; width: 24px; height: 24px; padding: 0; cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 0; width: 24px; height: 2px; background: #fff; content: ''; transition: transform .25s, opacity .25s; }
.burger span { top: 11px; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 767.98px) {
  header nav { position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(0, 0, 0, .9); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; pointer-events: none; transition: opacity .25s; }
  header nav a { font-family: var(--font-head); font-size: 2rem; color: #fff; }
  body.menu-open header nav { opacity: 1; pointer-events: auto; }
  .burger { display: block; }
}

/* ---------- blocks ---------- */
.b { position: relative; }
.b-image figure img { width: 100%; height: auto; }
.b-image figure.natural img { width: auto; }
.b-image figure.align-center img { margin: 0 auto; }
.b-image figure.align-right img { margin-left: auto; }
figcaption { font-size: .8333rem; color: var(--muted); margin-top: .5rem; }

.video video { width: 100%; height: auto; background: #000; }

.embed { position: relative; height: 0; overflow: hidden; background: #111; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.slideshow { position: relative; }
.slides { position: relative; padding-bottom: var(--ratio); overflow: hidden; touch-action: pan-y; }
.slideshow.cover .slides { padding-bottom: 0; height: 100vh; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease-in-out; }
.slide.on { opacity: 1; z-index: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slideshow button { z-index: 2; position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 3rem; line-height: 1; padding: 1rem; cursor: pointer; opacity: .7; text-shadow: 0 0 8px rgba(0, 0, 0, .5); font-family: var(--font-body); }
.slideshow button:hover { opacity: 1; }
.ss-prev { left: 0; } .ss-next { right: 0; }

.gallery { position: relative; height: 0; }
.g-item { display: block; position: absolute; }
.g-item img { width: 100%; height: auto; }
.g-in { display: block; position: relative; }
a.g-item .g-in::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .2s; }
a.g-item:hover .g-in::after { opacity: .2; }
/* phones: plain stacked list in original order */
@media (max-width: 543.98px) {
  .gallery { height: auto; padding-bottom: 0 !important; margin: 0 !important; }
  .g-item { position: static; width: auto !important; padding: 0 0 var(--gap) !important; }
}

/* project grid */
.projects { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 1.6667rem; padding-bottom: 1.6667rem; }
@media (max-width: 767.98px) { .projects { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 543.98px) { .projects { grid-template-columns: 1fr; } }
.thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: #111; }
.thumb img, .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.thumb:hover .t-hover, .thumb:focus-visible .t-hover { opacity: 1; }
.t-title { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; font-family: var(--font-head); font-size: 1.6667rem; line-height: 1.2; color: #fff; text-shadow: rgba(0, 0, 0, .3) 1px 1px 1px; }
@media (max-width: 991.98px) { .t-title { font-size: 1.3rem; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .95); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.lightbox.open { opacity: 1; }
.lightbox img { max-width: 94vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.5rem; cursor: pointer; padding: 1rem; opacity: .7; font-family: var(--font-body); }
.lightbox button:hover { opacity: 1; }
.lb-close { top: 0; right: 0; } .lb-prev { left: 0; top: 50%; transform: translateY(-50%); } .lb-next { right: 0; top: 50%; transform: translateY(-50%); }

/* fade-in on scroll, as on the old site */
.js .b { transition: opacity .8s ease-out; }
.js .b.pre { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .b, .js .b.pre { transition: none; opacity: 1; } }

/* hover on still thumbnails: 50% black fade, as on the original site */
.thumb:not(.has-video)::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s ease; }
.thumb:not(.has-video):hover::after, .thumb:not(.has-video):focus-visible::after { opacity: 1; }
.t-title { z-index: 2; }
.t-hover { transition-duration: .3s; }

/* font helpers (used inside rich text; migrated from Semplice's font_* classes) */
strong, b, .f-bold { font-family: var(--font-head); font-weight: 700; }
.f-regular { font-family: var(--font-ui); font-weight: 400; }
.f-light { font-family: var(--font-body); font-weight: 300; }