/*
 * Legal Disclaimer for Web licence
 *
 * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
 *
 * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
 *
 * It is strictly prohibited to rename the font and to download or use these fonts in any other media.
 *
 * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
 *
 * ordinaryfolk.co (monthly pageviews: <50K)
 *
 * Lineto licence 261023240275 (CircularXX Book + Medium, web), Ordinary Folk Studio Inc., 2026-10-23.
 */
/* CircularXX "Sub" cuts (Lineto's Western Latin subset; covers every character on the site). If a page ever needs
   other characters, swap in the "Web" (complete) files from the delivery folder; never rename the files.
   The overrides give CircularXX the vertical metrics of the Circular Std files the Webflow site served, so text sits
   on the same baselines. */
@font-face { font-family: Circular; src: url(/fonts/CircularXXSub-Book.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 99.7%; descent-override: 26.8%; line-gap-override: 0%; }
@font-face { font-family: Circular; src: url(/fonts/CircularXXSub-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 99.7%; descent-override: 26.8%; line-gap-override: 0%; }

/* Menu open: no page scroll behind it (site.js plays the open/close timelines). */
html.of-menu-open { overflow: hidden; }

/* Between pages the top nav stays on screen: it sits above the transition panel while one page leaves and the next
   arrives (site.js toggles .of-nav-up), and on click it takes on the next page's colours in the same tween as
   the panel, so the new page arrives with an identical nav. */
html.of-nav-up body > nav.nav { z-index: 5001; }
.transition { will-change: opacity; }

/* Lightbox (OF Player): media sits inside a frame with gutters, so the close button and arrows never cover it.
   Controls are the site's own round Lottie icons (50px, like the large icon links). Phones: arrows go under the media. */
.ofp { --ofp-x: 104px; --ofp-top: 88px; --ofp-bottom: 72px; }
.ofp .ofp-frame, .ofp .ofp-image, .ofp .ofp-video {
  position: absolute; top: var(--ofp-top); left: var(--ofp-x); margin: 0;
  width: calc(100% - 2 * var(--ofp-x)); height: calc(100% - var(--ofp-top) - var(--ofp-bottom));
}
.ofp .ofp-close, .ofp .ofp-nav { width: 34px; height: 34px; margin: 0; background: none; opacity: 1; font-size: 0; }
.ofp .ofp-close { top: 27px; right: 35px; }
.ofp .ofp-nav { top: 50%; transform: translateY(-50%); }
.ofp .ofp-prev { left: 35px; }
.ofp .ofp-next { right: 35px; }
.ofp .ofp-prev .ofp-icon { transform: scaleX(-1); }
.ofp-icon { width: 34px; height: 34px; pointer-events: none; }
.ofp .ofp-count { bottom: 28px; font-family: Circular, sans-serif; font-size: 14px; letter-spacing: 0; color: #a2a2a2; }
@media (max-width: 767px) {
  .ofp { --ofp-x: 16px; --ofp-top: 72px; --ofp-bottom: 96px; }
  .ofp .ofp-close { top: 19px; right: 19px; }
  .ofp .ofp-nav { top: auto; bottom: 31px; transform: none; }
  .ofp .ofp-prev { left: 19px; }
  .ofp .ofp-next { right: 19px; }
  .ofp .ofp-count { bottom: 41px; }
}

/* Timeline block (src/blocks/timeline.js). */
.oftl{margin:3vw 0 0;font-family:Circular,Arial,sans-serif;color:#161616}
.oftl ol,.oftl ul{list-style:none;margin:0;padding:0}.oftl p{margin:0}.oftl strong{font-weight:500}
.oftl-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.oftl-k{font-size:18px;line-height:1.4;color:#a2a2a2}
.oftl-nav{display:flex;gap:8px}
.oftl-btn{appearance:none;-webkit-appearance:none;width:44px;height:44px;border-radius:50%!important;border:1px solid rgba(22,22,22,.2);background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#161616;transition:border-color .3s,opacity .3s}
.oftl-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.oftl-btn:hover{border-color:#161616}.oftl-btn:disabled{opacity:.25;cursor:default;border-color:rgba(22,22,22,.2)}
.oftl-track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 7vw),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 7vw),transparent)}
.oftl-track::-webkit-scrollbar{display:none}
.oftl.is-mid .oftl-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5vw,#000 calc(100% - 7vw),transparent);mask-image:linear-gradient(90deg,transparent,#000 5vw,#000 calc(100% - 7vw),transparent)}
.oftl.is-end .oftl-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5vw);mask-image:linear-gradient(90deg,transparent,#000 5vw)}
.oftl.is-drag .oftl-track{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.oftl-i{position:relative;flex:0 0 17vw;box-sizing:border-box;padding:56px 2.2vw 4px 0;scroll-snap-align:start}
.oftl-i:before{content:attr(data-y);position:absolute;left:0;top:0;font-size:32px;line-height:32px;font-weight:500}
.oftl-i:after{content:"";position:absolute;left:0;right:0;top:44px;height:1px;background:rgba(22,22,22,.22)}
.oftl-i:last-child:after{right:auto;width:11px}
.oftl-dot{position:absolute;left:0;top:39px;z-index:1;width:11px;height:11px;border-radius:6px;background:#161616}
.oftl-r .oftl-dot{width:44px}
.oftl-d{display:block;margin-top:12px;font-size:18px;line-height:1.4;color:#a2a2a2}
.oftl-i p{font-size:18px;line-height:1.4}
.oftl-i ul{margin-top:6px}
.oftl-i ul li{position:relative;padding-left:14px;font-size:16px;line-height:1.35;margin-top:4px}
.oftl-i ul li:before{content:"";position:absolute;left:0;top:.68em;width:7px;height:1px;background:#a2a2a2}
@media (max-width:991px){.oftl-i{flex-basis:28vw}}
@media (max-width:767px){.oftl{margin-top:40px}.oftl-i{flex-basis:66vw;padding-right:7vw}.oftl-i:before{font-size:26px}.oftl-i p,.oftl-d,.oftl-k{font-size:16px}.oftl-i ul li{font-size:15px}.oftl-btn{width:38px;height:38px}}

/* Consistency pass (2026-10-22): the same spacing on every project page, measured with scripts/consistency.mjs.
   1. Media sits flush in its frame (no 5px baseline strip under inline images and links), so grid gaps are 1.5vw.
   2. Floated columns contain their frames without Webflow's clearfix (which added a few px of line height).
   3. Empty grid rows take no space.
   4. Desktop: the last frame in a column adds no bottom margin (it doubled the row gap and the space before Next Project).
   5. Phones: the last piece of content (at any depth, ignoring empty trailing columns) adds no bottom margin, so Next
      Project is 100px below the work everywhere. Loop videos keep their margins (Webflow centres them with auto margins).
   6. Project titles start on the grid line (72px at 1440), like the stats and images below them.
   7. Loops are 101% wide in Webflow (to hide a seam); clip them to their frame so they end on the grid edge
      (clip-path, not overflow: overflow changed the layout of some grids). */
.section-work img, .section-work video, .section-work a.module-lightbox { vertical-align: top; }
.section-work .column-work-grid.w-clearfix { display: flow-root; }
.section-work .column-work-grid.w-clearfix::before, .section-work .column-work-grid.w-clearfix::after { display: none; }
.section-work > .row-work-grid:not(:has(img, video, iframe, p, h2, h3)) { display: none; }
@media (min-width: 768px) {
  .section-work .column-work-grid > :last-child, .section-work .column-work-grid > .square-2-col-left:nth-last-child(2), .section-work .column-work-grid > .square-2-col-right:nth-last-child(2) { margin-bottom: 0; }
}
@media (max-width: 767px) {
  .section-work > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))):not(video, .w-background-video > *),
  .section-work > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))):not(video, .w-background-video > *),
  .section-work > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))):not(video, .w-background-video > *),
  .section-work > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))):not(video, .w-background-video > *),
  .section-work > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))):not(video, .w-background-video > *),
  .section-work > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))) > :not(:has(~ :is(img,video,iframe,p,h2,h3,.oftl), ~ * :is(img,video,iframe,p,h2,h3,.oftl))):not(video, .w-background-video > *) { margin-bottom: 0 !important; }
}
.project-title { margin-left: .5vw; }
.section-work .video-loop.w-embed, .section-work .module-full { clip-path: inset(0); }

/* Play: section headings in the site grey (#333 disappeared on the dark page). */
.heading-play { color: #a2a2a2; }