/* ========================================================================== KATHA STUDIOS — DESIGN SYSTEM Seeded by the logo: Didot, navy, two dots, two lines. Navy — identity. Most type, the deep sections. Orange — the start of something: active states, leading lines. Green — where it arrives: destinations, the trailing line. Orange and green are marks, never text colours or fills for large areas. ========================================================================== */ :root{ --navy:#06125A; --navy-deep:#040B3C; --navy-2:#101C6B; --orange:#F18A32; --green:#1A883E; --ivory:#F3EEE4; --paper:#FAF7F1; --white:#FFFFFF; --stone:#E6DED0; --ink:#0C0D12; --muted:#5B5850; --muted-on-navy:rgba(243,238,228,.66); --fg:var(--navy); --bg:var(--ivory); --rule:rgba(6,18,90,.16); --serif:'Bodoni Moda', Didot, 'Bodoni 72', 'Didot LT STD', 'Libre Bodoni', Georgia, serif; --sans:'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --deva:'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif; --gutter:clamp(20px, 3.4vw, 52px); --col-gap:clamp(14px, 1.8vw, 28px); --max:1560px; --nav-h:84px; --ease:cubic-bezier(.19,1,.22,1); --ease-io:cubic-bezier(.77,0,.18,1); --ease-soft:cubic-bezier(.33,.9,.35,1); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--fg); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-kerning:normal; overflow-x:clip; } img,video,svg{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; } h1,h2,h3,h4,h5,p,ol,ul,dl,dd,figure,blockquote{ margin:0; padding:0; } ol,ul{ list-style:none; } ::selection{ background:var(--navy); color:var(--ivory); } [hidden]{ display:none !important; } :focus{ outline:none; } :focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:1px; } .skip{ position:fixed; left:12px; top:12px; z-index:3000; padding:10px 14px; background:var(--navy); color:var(--ivory); font:600 12px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; transform:translateY(-160%); transition:transform .3s var(--ease); } .skip:focus{ transform:none; } .sr-only{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } .container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); } .grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); } /* Surfaces — the site's rhythm: light, image, navy, white, colour, light */ .s-ivory{ --bg:var(--ivory); --fg:var(--navy); background:var(--ivory); color:var(--navy); } .s-paper{ --bg:var(--paper); --fg:var(--navy); background:var(--paper); color:var(--navy); } .s-white{ --bg:var(--white); --fg:var(--navy); background:var(--white); color:var(--navy); } .s-stone{ --bg:var(--stone); --fg:var(--navy); background:var(--stone); color:var(--navy); } .s-navy { --bg:var(--navy); --fg:var(--ivory); --rule:rgba(243,238,228,.2); --muted:var(--muted-on-navy); background:var(--navy); color:var(--ivory); } .s-ink { --bg:var(--ink); --fg:var(--ivory); --rule:rgba(243,238,228,.18); --muted:var(--muted-on-navy); background:var(--ink); color:var(--ivory); } .section{ position:relative; padding-block:clamp(88px, 11vw, 168px); } /* -------------------------------------------------------------------------- Typography Serif statements are lowercase, like the wordmark. Everything that informs rather than expresses is set in the sans. -------------------------------------------------------------------------- */ .t-mega, .t-display, .t-h1, .t-h2, .t-h3, .t-serif{ font-family:var(--serif); font-weight:400; font-optical-sizing:auto; letter-spacing:-.018em; } /* Bodoni Moda's high optical sizes thin the hairlines to nothing. The logo's Didot is sturdier, so display type pins a low optical size and weight 500. */ .t-mega, .t-display, .t-h1, .hero__title, .soon__title, .promo__name, .sector__title, .poster__title, .credits dd, .scope li, .menu__title, .lead-feature__name{ font-weight:500; font-variation-settings:"opsz" 22; } .t-h2, .t-h3, .entry__title, .team-row__name, .drawer__item-title, .member__name, .up-card__title{ font-variation-settings:"opsz" 18; } .t-mega { font-size:clamp(58px, 11.4vw, 196px); line-height:.86; letter-spacing:-.03em; } .t-display{ font-size:clamp(44px, 6.9vw, 118px); line-height:.9; letter-spacing:-.028em; } .t-h1 { font-size:clamp(36px, 4.7vw, 80px); line-height:.96; letter-spacing:-.022em; } .t-h2 { font-size:clamp(28px, 3.1vw, 50px); line-height:1.02; } .t-h3 { font-size:clamp(22px, 2vw, 32px); line-height:1.1; letter-spacing:-.01em; } .lower { text-transform:lowercase; } .t-mega em, .t-display em, .t-h1 em, .t-h2 em, .t-h3 em, .t-serif em{ font-style:italic; } .t-lede{ font:400 clamp(19px, 1.7vw, 26px)/1.5 var(--sans); letter-spacing:-.008em; max-width:40ch; } .t-body{ font:400 18px/1.7 var(--sans); max-width:62ch; } .t-body p + p, .t-lede + .t-lede{ margin-top:1em; } .t-muted{ color:var(--muted); } .meta{ font:600 12.5px/1.35 var(--sans); letter-spacing:.13em; text-transform:uppercase; font-variant-numeric:tabular-nums; } .meta--soft{ color:var(--muted); } .index{ font:italic 400 17px/1 var(--serif); letter-spacing:0; font-variant-numeric:lining-nums; } /* -------------------------------------------------------------------------- Brand grammar — dots and lines from the logo -------------------------------------------------------------------------- */ /* Two dots used as punctuation, sitting just above x-height like the mark. */ .dots{ display:inline-flex; gap:.1em; margin-left:.035em; transform:translateY(-.5em); vertical-align:baseline; } .dots i{ display:block; width:.082em; height:.082em; min-width:4px; min-height:4px; border-radius:50%; background:var(--orange); } .dots i + i{ background:var(--green); } /* The two horizontal lines. Thickness equals the gap, as in the logo. */ .lines{ --lw:2px; display:block; height:calc(var(--lw) * 3); background:linear-gradient(var(--orange) 0 var(--lw), transparent var(--lw) calc(var(--lw) * 2), var(--green) calc(var(--lw) * 2)); } /* A single marker dot for "current" / "here". */ .marker{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; } .marker--green{ background:var(--green); } /* Section header: folio number, label, a hairline that starts from a dot. */ .sec-head{ display:flex; align-items:center; gap:16px; color:inherit; } .sec-head__no{ font:italic 400 18px/1 var(--serif); } .sec-head__label{ font:600 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; } .sec-head__rule{ position:relative; flex:1; height:1px; } .sec-head__rule::before{ content:''; position:absolute; inset:0; background:currentColor; opacity:.2; transform-origin:left; transition:transform 1.4s var(--ease) .1s; } .sec-head__rule::after{ content:''; position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--orange); } .js .sec-head[data-reveal] .sec-head__rule::before{ transform:scaleX(0); } .js .sec-head[data-reveal].is-in .sec-head__rule::before{ transform:none; } /* Calls to action: never pills. Text + arrow; the logo lines draw on hover. */ .cta{ position:relative; display:inline-flex; align-items:center; gap:14px; padding:8px 0 13px; font:600 13.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; } .cta::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; opacity:.35; } .cta::before{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:5px; z-index:1; background:linear-gradient(var(--orange) 0 1.5px, transparent 1.5px 3.5px, var(--green) 3.5px 5px); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); } .cta:hover::before, .cta:focus-visible::before{ transform:none; } /* Arrows are drawn, not typed: the glyph varies too much between fonts. */ .arrow{ display:inline-block; flex:none; width:17px; height:10px; font-size:0; color:inherit; vertical-align:middle; background:currentColor; transition:transform .5s var(--ease); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 10'%3E%3Cpath d='M0 5h15.5M11.5 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 10'%3E%3Cpath d='M0 5h15.5M11.5 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat; } .cta:hover .arrow, a:hover > .arrow, a:hover .arrow{ transform:translateX(6px); } .cta--big{ font-size:14px; gap:18px; } .tag-placeholder{ display:inline-flex; align-items:center; gap:7px; font:600 11px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); } .tag-placeholder::before{ content:''; width:7px; height:7px; border-radius:50%; border:1px solid currentColor; } /* -------------------------------------------------------------------------- Frames (images) -------------------------------------------------------------------------- */ .frame{ position:relative; } .frame__media{ position:relative; overflow:hidden; aspect-ratio:var(--ratio, 4/5); background:var(--stone); } .frame__media img, .cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .frame__cap{ display:flex; justify-content:space-between; gap:12px; margin-top:12px; font:500 12px/1.3 var(--sans); letter-spacing:.02em; color:var(--muted); } .frame__cap .index{ font-size:14px; color:var(--fg); } .js [data-reveal="clip"] .frame__media, .js [data-reveal="clip"].frame__media{ clip-path:inset(100% 0 0 0); transition:clip-path 1.3s var(--ease); } .js [data-reveal="clip"] .frame__media img, .js [data-reveal="clip"].frame__media img{ transform:scale(1.14); transition:transform 1.8s var(--ease); } .js [data-reveal="clip"].is-in .frame__media, .js [data-reveal="clip"].is-in.frame__media{ clip-path:inset(0 0 0 0); } .js [data-reveal="clip"].is-in .frame__media img, .js [data-reveal="clip"].is-in.frame__media img{ transform:none; } .js [data-reveal="up"]{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease-soft), transform 1.2s var(--ease); transition-delay:var(--d, 0s); } .js [data-reveal="up"].is-in{ opacity:1; transform:none; } .js [data-reveal="fade"]{ opacity:0; transition:opacity 1.2s var(--ease-soft); transition-delay:var(--d, 0s); } .js [data-reveal="fade"].is-in{ opacity:1; } /* Line-by-line masked type reveal */ .mask{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; } .mask > span{ display:block; } .js [data-reveal="lines"] .mask > span{ transform:translateY(105%); transition:transform 1.25s var(--ease); } .js [data-reveal="lines"] .mask:nth-child(2) > span{ transition-delay:.08s; } .js [data-reveal="lines"] .mask:nth-child(3) > span{ transition-delay:.16s; } .js [data-reveal="lines"] .mask:nth-child(4) > span{ transition-delay:.24s; } .js [data-reveal="lines"].is-in .mask > span{ transform:none; } /* Crop marks: used on placeholders and viewfinders */ .crops{ position:absolute; inset:12px; pointer-events:none; color:currentColor; opacity:.5; background: linear-gradient(currentColor,currentColor) left top/14px 1px no-repeat, linear-gradient(currentColor,currentColor) left top/1px 14px no-repeat, linear-gradient(currentColor,currentColor) right top/14px 1px no-repeat, linear-gradient(currentColor,currentColor) right top/1px 14px no-repeat, linear-gradient(currentColor,currentColor) left bottom/14px 1px no-repeat, linear-gradient(currentColor,currentColor) left bottom/1px 14px no-repeat, linear-gradient(currentColor,currentColor) right bottom/14px 1px no-repeat, linear-gradient(currentColor,currentColor) right bottom/1px 14px no-repeat; } /* Portrait placeholder: an empty sitting, not a fake face. */ .portrait{ position:relative; overflow:hidden; aspect-ratio:var(--ratio, 4/5); background:var(--stone); color:var(--navy); container-type:inline-size; } .portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .portrait__mono{ position:absolute; left:50%; bottom:-.2em; transform:translateX(-50%); font:500 70cqi/0.8 var(--serif); font-variation-settings:"opsz" 22; letter-spacing:-.04em; white-space:nowrap; opacity:.1; } .portrait__note{ position:absolute; left:18px; top:18px; font:600 9.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; opacity:.62; } .portrait .crops{ opacity:.35; } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ .nav{ position:fixed; inset:0 0 auto 0; z-index:1000; color:var(--navy); pointer-events:none; } .nav > *{ pointer-events:auto; } .nav__bar{ position:relative; z-index:2; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; padding-inline:var(--gutter); transition:transform .6s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease); } .nav.is-solid .nav__bar{ background:rgba(250,247,241,.94); box-shadow:0 1px 0 var(--rule); -webkit-backdrop-filter:saturate(1.2) blur(12px); backdrop-filter:saturate(1.2) blur(12px); } .nav.is-hidden:not(.is-open) .nav__bar{ transform:translateY(-100%); } .nav.is-hidden:not(.is-open) .nav__progress{ transform:translateY(calc(var(--nav-h) * -1)); } .nav__logo{ position:relative; display:block; flex:none; } .nav__logo img{ height:48px; width:auto; transition:opacity .4s; } .nav__logo-rev{ position:absolute; left:0; top:0; opacity:0; } /* floating over a dark opening: reversed logo, light type (per the brand guidelines) */ .nav.is-dark:not(.is-solid):not(.is-open):not(.has-drawer){ color:var(--ivory); } .nav.is-dark:not(.is-solid):not(.is-open):not(.has-drawer) .nav__logo-img{ opacity:0; } .nav.is-dark:not(.is-solid):not(.is-open):not(.has-drawer) .nav__logo-rev{ opacity:1; } .nav__primary ul{ display:flex; align-items:center; gap:clamp(22px, 2.6vw, 44px); } .nav__link{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:12px 0; font:600 13px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; } .nav__link::after{ content:''; position:absolute; left:0; right:0; bottom:2px; height:5px; background:linear-gradient(var(--orange) 0 1.5px, transparent 1.5px 3.5px, var(--green) 3.5px 5px); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); } .nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-expanded="true"]::after{ transform:scaleX(1); } .nav__link[aria-current]::after{ transform:scaleX(1); } .nav__chev{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .4s var(--ease); } .nav__link[aria-expanded="true"] .nav__chev{ transform:translateY(1px) rotate(-135deg); } .nav__menu{ display:none; align-items:center; gap:12px; font:600 12px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; padding:10px 0; } .nav__menu-icon{ position:relative; width:26px; height:8px; } .nav__menu-icon i{ position:absolute; left:0; right:0; height:2px; background:var(--orange); transition:transform .5s var(--ease), top .5s var(--ease); } .nav__menu-icon i:first-child{ top:0; } .nav__menu-icon i + i{ top:6px; background:var(--green); } .nav.is-open .nav__menu-icon i:first-child{ top:3px; transform:rotate(35deg); } .nav.is-open .nav__menu-icon i + i{ top:3px; transform:rotate(-35deg); } /* Scroll progress: an orange line travelling toward a green point. */ .nav__progress{ position:absolute; left:0; right:0; top:var(--nav-h); height:2px; z-index:3; pointer-events:none; transition:transform .6s var(--ease), opacity .4s; opacity:0; } .nav.is-solid .nav__progress{ opacity:1; } .nav__progress i{ position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--orange); transform-origin:left; transform:scaleX(var(--p, 0)); } .nav__progress b{ position:absolute; top:-2.5px; left:0; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--green); transform:translateX(calc(var(--p, 0) * 100vw)); } /* Drawer (desktop sub navigation) */ .drawer{ position:absolute; left:0; right:0; top:0; z-index:1; padding:calc(var(--nav-h) + 26px) var(--gutter) 44px; background:var(--paper); box-shadow:0 1px 0 var(--rule), 0 40px 80px -40px rgba(6,18,90,.25); clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .7s var(--ease), visibility 0s linear .7s; } .drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .7s var(--ease), visibility 0s; } .drawer__inner{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); max-width:var(--max); margin-inline:auto; } .drawer__label{ grid-column:1 / span 3; padding-top:10px; } .drawer__label p + p{ margin-top:10px; max-width:24ch; font-size:14px; line-height:1.5; color:var(--muted); letter-spacing:0; text-transform:none; font-weight:400; } .drawer__list{ grid-column:4 / span 6; border-top:1px solid var(--rule); } .drawer__list li{ border-bottom:1px solid var(--rule); } .drawer__item{ display:grid; grid-template-columns:44px 1fr auto; align-items:baseline; gap:12px; padding:16px 0 15px; transition:padding .5s var(--ease); } .drawer__item .index{ color:var(--muted); } .drawer__item-title{ font:400 clamp(24px, 2.2vw, 34px)/1.05 var(--serif); letter-spacing:-.015em; } .drawer__item-note{ font-size:14px; color:var(--muted); } .drawer__item:hover, .drawer__item:focus-visible{ padding-left:14px; } .drawer__item:hover .index, .drawer__item:focus-visible .index{ color:var(--orange); } .drawer__preview{ grid-column:10 / span 3; position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--stone); } .drawer__preview img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .6s var(--ease), transform 1.2s var(--ease); } .drawer__preview img.is-active{ opacity:1; transform:none; } /* Mobile menu */ .menu{ position:fixed; inset:0; z-index:999; background:var(--paper); color:var(--navy); padding:calc(var(--nav-h) + 12px) var(--gutter) 28px; display:flex; flex-direction:column; overflow-y:auto; clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .8s var(--ease-io), visibility 0s linear .8s; } .menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .8s var(--ease-io), visibility 0s; } .menu__list{ border-top:1px solid var(--rule); } .menu__list > li{ border-bottom:1px solid var(--rule); } .menu__row{ display:flex; align-items:baseline; justify-content:space-between; width:100%; gap:14px; padding:16px 0 14px; text-align:left; } .menu__row .index{ font-size:14px; color:var(--muted); width:30px; flex:none; } .menu__title{ flex:1; font:400 clamp(34px, 10vw, 54px)/1.04 var(--serif); letter-spacing:-.02em; } .menu__row[aria-current] .index, .menu__row[data-current] .index, .menu__row[aria-expanded="true"] .index{ color:var(--orange); } .menu__plus{ position:relative; width:14px; height:14px; flex:none; align-self:center; } .menu__plus::before, .menu__plus::after{ content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transition:transform .45s var(--ease); } .menu__plus::after{ transform:rotate(90deg); } .menu__row[aria-expanded="true"] .menu__plus::after{ transform:rotate(0); } .menu__sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); } .menu__sub > div{ overflow:hidden; } .menu__sub.is-open{ grid-template-rows:1fr; } .menu__sub a{ display:block; padding:9px 0 9px 44px; font:500 16px/1.3 var(--sans); } .menu__sub a:last-child{ margin-bottom:16px; } .menu__foot{ margin-top:auto; padding-top:34px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; } .menu__foot .lines{ width:84px; } .js .menu__list > li{ opacity:0; transform:translateY(20px); transition:opacity .5s, transform .8s var(--ease); } .menu.is-open .menu__list > li{ opacity:1; transform:none; transition-delay:calc(.18s + var(--i) * .05s); } /* -------------------------------------------------------------------------- Page veil -------------------------------------------------------------------------- */ .veil{ position:fixed; inset:0; z-index:2800; pointer-events:none; background:var(--veil, var(--paper)); clip-path:inset(100% 0 0 0); } .veil.is-leaving{ pointer-events:auto; clip-path:inset(0 0 0 0); transition:clip-path .55s var(--ease-io); } .veil__lines{ position:absolute; left:50%; top:50%; width:min(220px, 40vw); translate:-50% -50%; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease) .15s; } .veil.is-leaving .veil__lines{ transform:none; } html.veil-on body::after{ content:''; position:fixed; inset:0; z-index:2800; pointer-events:none; background:var(--veil, var(--paper)); animation:veilOut .9s var(--ease-io) .05s forwards; } @keyframes veilOut{ from{ clip-path:inset(0 0 0 0); } to{ clip-path:inset(0 0 100% 0); } } .poster-fly{ position:fixed; z-index:2790; pointer-events:none; transition:all .7s var(--ease-io); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer{ position:relative; overflow:hidden; padding-top:clamp(90px, 11vw, 170px); } .footer__cta{ display:block; width:fit-content; } .footer__cta .t-mega{ transition:color .5s var(--ease); } .footer__cta:hover .t-mega em{ color:var(--ivory); } .footer__cta-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; } .footer__cols{ margin-top:clamp(70px, 9vw, 130px); padding-top:34px; border-top:1px solid var(--rule); row-gap:40px; } .footer__brand{ grid-column:1 / span 3; } .footer__brand img{ width:150px; } .footer__col{ grid-column:span 2; } .footer__col h2{ margin-bottom:16px; color:var(--muted); } .footer__col li + li{ margin-top:8px; } .footer__col a{ font-size:16px; position:relative; } .footer__col a:hover{ color:#fff; } .footer__col a::before{ content:''; position:absolute; left:-14px; top:50%; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:var(--orange); opacity:0; transition:opacity .3s; } .footer__col a:hover::before{ opacity:1; } .footer__contact{ grid-column:span 3; } .footer__contact p{ font-size:16px; } .footer__bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-block:44px 30px; color:var(--muted); } .footer__end{ height:12px; --lw:4px; } /* -------------------------------------------------------------------------- Inner page head -------------------------------------------------------------------------- */ .page-head{ position:relative; padding-top:calc(var(--nav-h) + clamp(56px, 8vw, 120px)); padding-bottom:clamp(56px, 7vw, 110px); overflow:hidden; } .page-head__crumb{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(28px, 4vw, 54px); } .page-head__crumb a{ color:var(--muted); } .page-head__crumb a:hover{ color:var(--fg); } .page-head__title{ grid-column:1 / span 10; } .page-head__lede{ grid-column:7 / span 5; margin-top:clamp(32px, 4vw, 60px); } .page-head__lede .t-lede{ max-width:44ch; } /* ========================================================================== HOME — Opening The wordmark, with कथा set large behind it. No photography: the brand arrives first. The Devanagari grows out from behind the logo on load. ========================================================================== */ .hero{ position:relative; overflow:hidden; } .hero__inner{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); align-items:center; padding-top:calc(var(--nav-h) + clamp(30px, 5vh, 70px)); padding-bottom:0; } .hero__text{ grid-column:1 / span 6; grid-row:1; } .hero__eyebrow{ display:flex; align-items:center; gap:12px; } .hero__eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; } .hero__mark{ position:relative; margin-top:clamp(18px, 3vh, 36px); display:flex; align-items:center; justify-content:flex-start; } .hero__deva{ position:absolute; left:-.06em; top:50%; translate:0 -52%; font-family:var(--deva); font-size:clamp(160px, 19vw, 300px); line-height:.8; color:var(--navy); opacity:.07; white-space:nowrap; pointer-events:none; user-select:none; } .hero__logo{ position:relative; width:clamp(210px, 23vw, 350px); height:auto; } .hero__line{ margin-top:clamp(22px, 3vw, 44px); font-size:clamp(27px, 2.9vw, 46px); line-height:1.08; letter-spacing:-.028em; text-transform:none; font-weight:500; font-variation-settings:"opsz" 22; } .hero__intro{ margin-top:clamp(20px, 2.4vw, 32px); max-width:46ch; font-size:17.5px; line-height:1.66; color:var(--muted); } /* the banner image sits opposite the wordmark — drop a real picture in by replacing .hero__still-media's contents with an */ .hero__still{ grid-column:8 / span 5; grid-row:1; margin-right:calc(var(--gutter) * -1); } .hero__still-media{ position:relative; aspect-ratio:4/5; max-height:min(74vh, 660px); overflow:hidden; background:var(--stone); color:var(--navy); display:flex; align-items:center; justify-content:center; } .hero__still-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero__still-media .crops{ inset:16px; opacity:.4; } .hero__still-label{ color:var(--muted); font-size:12px; } .hero__index{ grid-column:1 / -1; grid-row:2; width:100%; margin-top:clamp(34px, 4.6vh, 68px); display:grid; grid-template-columns:repeat(var(--n, 4), 1fr); gap:0 var(--col-gap); border-top:1px solid var(--rule); } .hero__index a{ display:flex; align-items:baseline; gap:11px; padding:20px 12px 24px 0; border-right:1px solid var(--rule); transition:padding .5s var(--ease); } .hero__index a:last-child{ border-right:0; } .hero__index .index{ color:var(--muted); transition:color .4s; } .hero__index-title{ flex:1; font:500 15px/1.35 var(--sans); letter-spacing:-.005em; } .hero__index .arrow{ width:14px; opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .5s var(--ease); } .hero__index a:hover, .hero__index a:focus-visible{ padding-left:10px; } .hero__index a:hover .index{ color:var(--orange); } .hero__index a:hover .arrow{ opacity:1; transform:none; } /* entrance — plays once, on load */ .js .hero .hero__eyebrow{ opacity:0; } .hero.is-ready .hero__eyebrow{ opacity:1; transition:opacity .9s var(--ease-soft) .1s; } .js .hero .hero__logo{ opacity:0; transform:translateY(16px) scale(.97); } .hero.is-ready .hero__logo{ opacity:1; transform:none; transition:opacity 1.1s var(--ease-soft) .25s, transform 1.3s var(--ease) .25s; } .js .hero .hero__deva{ opacity:0; transform:scale(.86); } .hero.is-ready .hero__deva{ opacity:.075; transform:none; transition:opacity 1.8s var(--ease-soft) .75s, transform 2.2s var(--ease) .75s; } .js .hero .hero__line .mask > span{ transform:translateY(106%); } .hero.is-ready .hero__line .mask > span{ transform:none; transition:transform 1.2s var(--ease) .95s; } .js .hero .hero__intro{ opacity:0; transform:translateY(14px); } .hero.is-ready .hero__intro{ opacity:1; transform:none; transition:opacity 1s var(--ease-soft) 1.2s, transform 1.1s var(--ease) 1.2s; } .js .hero .hero__still-media{ opacity:0; clip-path:inset(100% 0 0 0); } .hero.is-ready .hero__still-media{ opacity:1; clip-path:inset(0 0 0 0); transition:opacity .9s var(--ease-soft) 1.15s, clip-path 1.3s var(--ease) 1.15s; } .js .hero .hero__index a{ opacity:0; transform:translateY(12px); } .hero.is-ready .hero__index a{ opacity:1; transform:none; transition:opacity .9s var(--ease-soft), transform 1s var(--ease); } .hero.is-ready .hero__index a:nth-child(1){ transition-delay:1.35s; } .hero.is-ready .hero__index a:nth-child(2){ transition-delay:1.45s; } .hero.is-ready .hero__index a:nth-child(3){ transition-delay:1.55s; } .hero.is-ready .hero__index a:nth-child(4){ transition-delay:1.65s; } .hero.is-ready .hero__index a:nth-child(5){ transition-delay:1.75s; } .js .hero .dots i{ transform:scale(0); } .hero.is-ready .dots i{ transform:none; transition:transform .6s var(--ease) 1.5s; } .hero.is-ready .dots i + i{ transition-delay:1.62s; } /* ========================================================================== HOME — 01 About Katha A short dark moment between the ivory opening and the white promoter section, carried by the type alone. ========================================================================== */ .about-k{ position:relative; overflow:hidden; padding-block:clamp(66px, 7.4vw, 116px); } .about-k .container{ position:relative; } .about-k__grid{ margin-top:clamp(34px, 4vw, 60px); align-items:end; row-gap:34px; } .about-k__statement{ grid-column:1 / span 7; font-size:clamp(40px, 5.6vw, 94px); } .about-k__statement .dots i{ background:var(--orange); } .about-k__statement .dots i + i{ background:var(--green); } .about-k__body{ grid-column:9 / span 4; padding-bottom:.4em; } .about-k__body .t-body{ font-size:18.5px; line-height:1.66; color:var(--muted); max-width:40ch; } .about-k__body .cta{ margin-top:26px; } /* the four businesses, one tight ruled row */ .whatrow{ display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0,1fr)); gap:0 var(--col-gap); margin-top:clamp(40px, 5vw, 76px); border-top:1px solid var(--rule); } .whatrow li{ border-right:1px solid var(--rule); } .whatrow li:last-child{ border-right:0; } .whatrow a{ display:flex; align-items:baseline; gap:11px; padding:20px 14px 22px 0; transition:padding .5s var(--ease); } .whatrow .index{ color:var(--muted); transition:color .4s; } .whatrow__title{ flex:1; font:500 15.5px/1.35 var(--sans); letter-spacing:-.005em; } .whatrow .arrow{ width:14px; opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .5s var(--ease); } .whatrow a:hover, .whatrow a:focus-visible{ padding-left:10px; } .whatrow a:hover .index{ color:var(--orange); } .whatrow a:hover .arrow{ opacity:1; transform:none; } /* ========================================================================== HOME — 02 Shibasish Sarkar Text on the left, the titles he has been part of moving on the right. ========================================================================== */ .promo{ margin-top:clamp(40px, 5vw, 80px); align-items:start; row-gap:50px; } .promo__text{ grid-column:1 / span 5; } .promo__name{ margin-top:20px; font-size:clamp(46px, 5.6vw, 92px); line-height:.9; } .promo__name .mask:last-child > span{ padding-left:.6em; } .promo__lede{ margin-top:clamp(26px, 3vw, 40px); max-width:40ch; } .promo__body{ margin-top:18px; } .promo__facts{ margin-left:0; max-width:none; } .promo__cta{ margin-top:34px; } .promo__reel{ grid-column:7 / span 6; } .promo__reel-label{ margin-bottom:16px; } .promo__reel-note{ margin-top:16px; } /* The moving strip. Columns run at different speeds; it only animates while it is on screen (see motion.js). */ .reel{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--col-gap); height:min(72vh, 620px); overflow:hidden; background:var(--bg); } .reel__col{ position:relative; overflow:hidden; } .reel__strip{ display:flex; flex-direction:column; gap:var(--col-gap); animation:reel var(--dur, 34s) linear infinite; animation-play-state:paused; } .reel__col:nth-child(2) .reel__strip{ animation-direction:reverse; } .reel.is-running .reel__strip{ animation-play-state:running; } .reel.is-static .reel__strip{ animation:none; } .reel__card{ flex:none; } .reel__card .title-art{ box-shadow:0 22px 44px -26px rgba(6,18,90,.5); } .reel__fade{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(var(--bg), transparent 14%, transparent 86%, var(--bg)); } @keyframes reel{ from{ transform:translateY(0); } to{ transform:translateY(calc(-50% - var(--col-gap) / 2)); } } /* ========================================================================== HOME — 03 What we do ========================================================================== */ .sectors__lede{ margin-top:clamp(36px, 4vw, 64px); max-width:30ch; } .sectors{ margin-top:clamp(44px, 5vw, 80px); border-top:1px solid var(--rule); } .sector{ border-bottom:1px solid var(--rule); } .sector__link{ display:grid; grid-template-columns:56px 112px minmax(0,1fr) minmax(0,.9fr) 40px; align-items:center; gap:26px; padding:20px 0; transition:padding .6s var(--ease); } .sector__no{ color:var(--muted); } .sector__media{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--stone); } .sector__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.6); transition:filter .7s var(--ease), transform 1.2s var(--ease); } .sector__text{ display:block; } .sector__title{ display:block; font:400 clamp(26px, 2.8vw, 44px)/1.04 var(--serif); letter-spacing:-.02em; } .sector__summary{ display:block; margin-top:10px; max-width:46ch; font-size:17px; line-height:1.62; color:var(--muted); } .sector__format{ justify-self:start; } .sector .arrow{ justify-self:end; opacity:.4; } .sector__link:hover, .sector__link:focus-visible{ padding-left:16px; } .sector__link:hover .sector__no, .sector__link:focus-visible .sector__no{ color:var(--orange); } .sector__link:hover .sector__media img{ filter:none; transform:scale(1.05); } .sector__link:hover .arrow{ opacity:1; } .sectors__more{ margin-top:clamp(40px, 5vw, 70px); } /* ========================================================================== Upcoming — the only work the studio can show yet ========================================================================== */ .upcoming__note{ margin-top:clamp(30px, 3.4vw, 50px); font-size:16.5px; } .workgroup{ margin-top:clamp(44px, 5vw, 76px); } .workgroup__head{ display:flex; align-items:center; gap:18px; } .workgroup__label{ font:400 clamp(26px, 2.6vw, 40px)/1 var(--serif); font-variation-settings:"opsz" 18; letter-spacing:-.02em; } .workgroup__rule{ flex:1; height:1px; background:currentColor; opacity:.18; } .workgroup__note{ flex:none; } .workgroup .up-grid{ margin-top:clamp(26px, 3vw, 42px); } .up-grid{ margin-top:clamp(40px, 5vw, 74px); align-items:start; row-gap:clamp(44px, 5vw, 70px); } .up-card{ grid-column:span 4; } .up-card__meta{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline; margin-top:16px; padding-top:12px; border-top:1px solid var(--rule); } .up-card__meta .index{ color:var(--muted); } .up-card__title{ font:400 clamp(21px, 1.8vw, 27px)/1.12 var(--serif); letter-spacing:-.012em; } .up-card__sub{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--muted); } .up-card__tag{ margin-top:10px; } /* ========================================================================== Shibasish Sarkar — page ========================================================================== */ /* the opening: name and role left, his photograph right, figures beneath */ .sh-hero{ padding-top:calc(var(--nav-h) + clamp(44px, 6vw, 88px)); padding-bottom:clamp(44px, 5vw, 76px); } .sh-hero__grid{ align-items:end; row-gap:40px; } .sh-hero__text{ grid-column:1 / span 7; } .sh-hero__role{ max-width:34ch; line-height:1.5; } .sh-hero__name{ margin-top:clamp(20px, 2.4vw, 36px); } .sh-hero__lede{ margin-top:clamp(24px, 2.6vw, 38px); max-width:40ch; } .sh-hero__portrait{ grid-column:9 / span 4; } .sh-figures{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px 24px; margin-top:clamp(40px, 5vw, 70px); padding-top:26px; border-top:1px solid var(--rule); } .sh-figures li{ display:flex; flex-direction:column; gap:7px; } .sh-figures__value{ font:400 clamp(30px, 3.2vw, 52px)/1 var(--serif); font-variation-settings:"opsz" 18; letter-spacing:-.028em; font-variant-numeric:lining-nums; } .sh-figures__label{ font:600 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .sh-about{ margin-top:clamp(40px, 5vw, 80px); align-items:start; row-gap:44px; } .sh-about__text{ grid-column:1 / span 7; } .sh-about__still{ grid-column:9 / span 4; } .sh-about__lede{ margin-top:clamp(24px, 2.6vw, 38px); max-width:46ch; } .sh-about__body{ margin-top:20px; max-width:62ch; } .sh-titles__note{ margin-top:clamp(28px, 3vw, 44px); max-width:60ch; } .sh-now{ margin-top:clamp(40px, 5vw, 80px); align-items:end; row-gap:34px; } .sh-now__line{ grid-column:1 / span 5; } .sh-now__body{ grid-column:6 / span 4; } .sh-now__still{ grid-column:10 / span 3; align-self:end; } .sh-now__still .frame__media{ background:var(--navy-2); } /* ========================================================================== Titles — the work he has been part of Artwork is 4:5. A title with no artwork gets a typeset panel instead, clearly marked, so nothing is invented to fill the grid. ========================================================================== */ .sh-work__head{ margin-top:clamp(36px, 4vw, 64px); align-items:end; row-gap:30px; } .sh-work__statement{ grid-column:1 / span 6; } .sh-work__note{ grid-column:8 / span 5; } .sh-work__count{ margin-top:18px; display:flex; align-items:baseline; gap:10px; font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .sh-work__count .index{ font-size:26px; color:var(--fg); } /* the year index */ .yearbar{ display:flex; flex-wrap:wrap; gap:0 2px; margin-top:clamp(26px, 3vw, 44px); padding-top:16px; border-top:1px solid var(--rule); } .yearbar a{ display:flex; align-items:baseline; gap:7px; padding:7px 12px 7px 0; transition:color .3s; } .yearbar__y{ font:italic 400 19px/1 var(--serif); font-variant-numeric:lining-nums; } .yearbar__n{ font:600 11px/1 var(--sans); letter-spacing:.1em; color:var(--muted); } .yearbar a:hover .yearbar__y, .yearbar a:focus-visible .yearbar__y{ color:var(--orange); } /* one year */ .services__intro{ margin-top:clamp(32px, 3.6vw, 52px); max-width:56ch; } .services{ margin-top:clamp(34px, 4vw, 56px); border-top:1px solid var(--rule); max-width:84ch; } .services li{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:20px; padding:22px 0 24px; border-bottom:1px solid var(--rule); } .services .index{ color:var(--muted); } .services p{ font-size:17.5px; line-height:1.66; } /* ========================================================================== Offices — the circuit / city list behind the button ========================================================================== */ .scope__text{ grid-column:2; } /* the Offices button gets a row of its own under the circuit line */ .scope--has-action{ padding-bottom:22px; } .scope__offices{ grid-column:2; grid-row:2; justify-self:start; margin-top:16px; font-size:12.5px; gap:11px; } dialog.offices{ width:min(980px, calc(100vw - 2 * var(--gutter))); max-width:none; max-height:min(84vh, 820px); margin:auto; padding:0; border:0; background:var(--paper); color:var(--navy); box-shadow:0 60px 120px -40px rgba(6,18,90,.45); } dialog.offices::backdrop{ background:rgba(6,18,90,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .offices__bar{ position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px) 20px; background:var(--paper); border-bottom:1px solid var(--rule); } .offices__title{ font:400 clamp(28px, 3vw, 44px)/1 var(--serif); font-variation-settings:"opsz" 18; letter-spacing:-.022em; } .offices__bar .meta{ margin-top:10px; } .offices__close{ font:600 12.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding:10px 0; } .offices__close:hover{ color:var(--fg); } .offices__body{ overflow-y:auto; padding:0 clamp(22px, 3vw, 40px) clamp(26px, 3vw, 40px); } .offices__row{ display:grid; grid-template-columns:44px minmax(130px, 1.1fr) minmax(0, 3fr); gap:18px; align-items:baseline; padding:18px 0 19px; border-bottom:1px solid var(--rule); } .offices__row:last-child{ border-bottom:0; } .offices__no{ color:var(--muted); } .offices__circuit{ font:400 clamp(19px, 1.7vw, 25px)/1.15 var(--serif); letter-spacing:-.015em; } .offices__cities{ font-size:16.5px; line-height:1.6; color:var(--muted); } .offices__dot{ margin:0 9px; opacity:.55; } /* ========================================================================== Creative Solutions — partner, clients, logos ========================================================================== */ .partner{ margin-top:clamp(40px, 5vw, 70px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(24px, 3vw, 50px); align-items:start; padding-top:30px; border-top:1px solid var(--rule); } .partner__mark{ display:flex; flex-direction:column; gap:16px; } .partner__mark img{ width:min(220px, 100%); height:auto; } .partner__note{ font-size:17.5px; line-height:1.68; color:var(--muted); max-width:62ch; } .counts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px 20px; margin-top:clamp(34px, 4vw, 56px); padding-top:26px; border-top:1px solid var(--rule); } .counts li{ display:flex; flex-direction:column; gap:6px; } .counts__value{ font:400 clamp(28px, 2.8vw, 44px)/1 var(--serif); font-variation-settings:"opsz" 18; letter-spacing:-.025em; font-variant-numeric:lining-nums; } .counts__label{ font:600 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } /* one even row height for every logo, so a wide wordmark and a small roundel read at the same weight; no cell boxes, nothing to leave gaps */ .logowall{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(30px, 3.4vw, 54px) clamp(22px, 2.6vw, 44px); margin-top:clamp(34px, 4vw, 56px); padding-top:clamp(30px, 3.4vw, 46px); border-top:1px solid var(--rule); background:none; border-left:0; border-right:0; border-bottom:0; align-items:center; justify-items:center; } .logowall li{ display:flex; align-items:center; justify-content:center; width:100%; height:44px; padding:0; background:none; aspect-ratio:auto; } .logowall img{ max-height:100%; max-width:86%; width:auto; height:auto; object-fit:contain; filter:grayscale(1) contrast(1.05); opacity:.72; mix-blend-mode:multiply; transition:filter .45s var(--ease), opacity .45s var(--ease); } .logowall li:hover img{ filter:none; opacity:1; } .namelist{ display:flex; flex-wrap:wrap; gap:10px 0; margin-top:clamp(28px, 3vw, 44px); } .namelist li{ font-size:16px; color:var(--muted); } .namelist li::after{ content:'\00b7'; margin:0 12px; opacity:.5; } .namelist li:last-child::after{ content:''; margin:0; } /* ========================================================================== Career — milestones on the same straight line ========================================================================== */ .career{ counter-reset:c; } .career__item{ position:relative; padding:26px 0 30px; border-bottom:1px solid var(--rule); } .career__item:first-child{ padding-top:4px; } .career__item:last-child{ border-bottom:0; } .career__head{ position:relative; display:flex; align-items:center; } .career__when{ font:italic 400 clamp(19px, 1.7vw, 26px)/1 var(--serif); font-variant-numeric:lining-nums; color:var(--muted); } .career__title{ margin-top:12px; max-width:34ch; font:400 clamp(23px, 2.3vw, 36px)/1.06 var(--serif); font-variation-settings:"opsz" 18; letter-spacing:-.018em; } .career__note{ margin-top:14px; max-width:66ch; font-size:17.5px; line-height:1.68; color:var(--muted); } /* ========================================================================== Figures ========================================================================== */ .numbers{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 30px; margin-top:clamp(32px, 3.6vw, 50px); padding-top:26px; border-top:1px solid var(--rule); } .numbers li{ display:flex; flex-direction:column; gap:7px; } .numbers__value{ font:400 clamp(30px, 3vw, 46px)/1 var(--serif); font-variation-settings:"opsz" 18; letter-spacing:-.025em; font-variant-numeric:lining-nums; } .numbers__label{ font-size:14.5px; line-height:1.45; color:var(--muted); max-width:22ch; } .sh-about__facts, .promo__facts{ margin-left:0; max-width:none; } .sh-social{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:28px; } .sh-social a{ font:600 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-bottom:4px; border-bottom:1px solid var(--rule); } .sh-social a:hover{ color:var(--fg); border-bottom-color:var(--orange); } .up-card__art .poster{ height:100%; } .up-card__note{ margin-top:12px; font-size:16.5px; line-height:1.62; color:var(--muted); } .up-card__cast{ margin-top:10px; font-size:15.5px; line-height:1.58; color:var(--muted); opacity:.9; } /* the root: one wire running down the left, threading through every year */ .roots{ position:relative; margin-top:clamp(20px, 2.4vw, 36px); padding-left:var(--root-w); --root-w:clamp(56px, 6vw, 96px); } .roots__wire{ position:absolute; left:0; top:0; width:var(--root-w); height:100%; overflow:visible; pointer-events:none; } .roots__hair{ fill:none; stroke:currentColor; stroke-width:1; opacity:.14; } .roots__path{ fill:none; stroke-width:1.6; stroke-linecap:round; } .roots__rootlets path{ fill:none; stroke:currentColor; stroke-width:1; opacity:.2; } .roots__rootlets circle{ fill:var(--orange); opacity:calc(.25 + var(--grown, 0) * .75); } .roots.is-bare .roots__wire{ display:none; } .yeargroup{ position:relative; margin-top:clamp(44px, 5vw, 76px); scroll-margin-top:calc(var(--nav-h) + 24px); } .yeargroup:first-child{ margin-top:0; } .yeargroup__node{ position:absolute; left:calc(var(--root-w) * -1); top:0; width:1px; height:0; } .yeargroup__head{ position:relative; display:flex; align-items:center; gap:18px; } .yeargroup__node{ left:auto; right:calc(100% + 12px); top:50%; width:8px; height:8px; margin-top:-4px; } .yeargroup__year{ font:400 clamp(30px, 3.2vw, 50px)/1 var(--serif); font-variation-settings:"opsz" 18; letter-spacing:-.02em; font-variant-numeric:lining-nums; } .yeargroup__rule{ flex:1; height:1px; background:currentColor; opacity:.18; } .yeargroup__n{ flex:none; } .yeargroup .title-grid{ margin-top:clamp(24px, 2.6vw, 38px); } .title-grid{ align-items:start; row-gap:clamp(34px, 4vw, 56px); } .title-card{ grid-column:span 3; } .title-art{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--stone); } .title-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .title-art--none{ display:flex; align-items:center; justify-content:center; padding:14% 12%; background:var(--paper); box-shadow:inset 0 0 0 1px var(--rule); color:var(--navy); } .title-art--none .crops{ inset:9px; opacity:.3; } .title-art__set{ font:400 clamp(17px, 1.5vw, 23px)/1.1 var(--serif); font-variation-settings:"opsz" 18; letter-spacing:-.02em; text-align:center; text-wrap:balance; opacity:.78; } .title-art__note{ position:absolute; left:14px; bottom:12px; font-size:10.5px; color:var(--muted); } .title-card__name{ margin-top:14px; font:400 clamp(17px, 1.35vw, 21px)/1.14 var(--serif); font-variation-settings:"opsz" 18; letter-spacing:-.012em; } .title-card__meta{ margin-top:7px; } .title-card__cast{ margin-top:9px; font-size:13px; line-height:1.5; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ========================================================================== Business treatments — the visual world of each vertical (business pages only; the home page shows one still per sector) ========================================================================== */ .world-view{ position:absolute; inset:0; visibility:hidden; clip-path:inset(0 0 0 100%); transition:clip-path 0s linear 1s, visibility 0s linear 1s; } .world-view.is-active{ visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path 1s var(--ease-io), visibility 0s; z-index:1; } .world-view{ container-type:size; } .world-view.is-static{ visibility:visible; clip-path:none; transition:none; } .tr{ position:absolute; inset:0; overflow:hidden; background:var(--navy-deep); color:var(--ivory); } @container (min-aspect-ratio: 16/9){ .tr--vertical{ padding-inline:20%; } } .tr__meta{ position:absolute; left:22px; right:22px; display:flex; justify-content:space-between; gap:12px; z-index:3; font:600 10.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:rgba(243,238,228,.78); } .tr__meta--top{ top:20px; } .tr__meta--bottom{ bottom:20px; } .tr__rec{ display:inline-flex; align-items:center; gap:8px; } .tr__rec::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--orange); animation:blink 1.6s steps(1) infinite; } @keyframes blink{ 50%{ opacity:.2; } } /* cinema — wide, letterboxed */ .tr--cinema .tr-cinema__frame{ position:absolute; left:0; right:0; top:50%; aspect-ratio:2.39/1; transform:translateY(-50%); overflow:hidden; } .tr--cinema img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 9s linear; } .world-view.is-active .tr--cinema img, .is-live .tr--cinema img{ transform:scale(1); } .tr--cinema .crops{ inset:18px; color:var(--ivory); opacity:.7; } .tr-cinema__guides{ position:absolute; inset:0; pointer-events:none; } .tr-cinema__guides::before, .tr-cinema__guides::after{ content:''; position:absolute; left:33.33%; right:33.33%; top:0; bottom:0; border-left:1px solid rgba(255,255,255,.08); border-right:1px solid rgba(255,255,255,.08); } .tr-cinema__guides::after{ left:0; right:0; top:33.33%; bottom:33.33%; border:0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); } /* vertical — fast, stacked 9:16 frames */ .tr--vertical{ display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:12px; padding:0 12px; } .tr-v__col{ position:relative; overflow:hidden; } .tr-v__strip{ display:flex; flex-direction:column; gap:12px; animation:reel var(--dur, 30s) linear infinite; animation-play-state:paused; } .tr-v__col:nth-child(2) .tr-v__strip{ animation-direction:reverse; } .world-view.is-active.in-view .tr-v__strip, .is-live .tr-v__strip{ animation-play-state:running; } .tr-v__frame{ position:relative; aspect-ratio:var(--fr, 9/16); overflow:hidden; background:var(--navy-2); flex:none; } .tr-v__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .tr-v__bars{ position:absolute; left:10px; right:10px; top:10px; display:flex; gap:4px; z-index:2; } .tr-v__bars span{ flex:1; height:2px; background:rgba(255,255,255,.35); overflow:hidden; } .tr-v__bars span:first-child{ background:var(--orange); } @keyframes reel{ from{ transform:translateY(0); } to{ transform:translateY(calc(-50% - 6px)); } } .tr--vertical .tr__meta{ z-index:4; } .tr--vertical::after{ content:''; position:absolute; inset:0; background:linear-gradient(var(--navy-deep), transparent 16%, transparent 84%, var(--navy-deep)); pointer-events:none; z-index:3; } /* network — one film, many screens */ .tr--network{ background:var(--navy-deep); } /* sized in container units so the composition holds at any stage shape */ .tr-n__origin{ position:absolute; left:6cqw; top:50%; height:62cqh; aspect-ratio:2/3; transform:translateY(-50%); box-shadow:0 30px 60px -20px rgba(0,0,0,.6); } .tr-n__origin > img, .tr-n__glass img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .tr-n__origin-dot{ position:absolute; right:-5px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--orange); z-index:2; } .tr-n__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .tr-n__lines path{ fill:none; stroke:var(--orange); stroke-width:1.25; vector-effect:non-scaling-stroke; stroke-dasharray:4 6; animation:flow 1.8s linear infinite; animation-play-state:paused; } .world-view.is-active.in-view .tr-n__lines path, .is-live .tr-n__lines path{ animation-play-state:running; } @keyframes flow{ to{ stroke-dashoffset:-20; } } .tr-n__screen{ position:absolute; } .tr-n__glass{ position:absolute; inset:0; overflow:hidden; background:var(--navy-2); outline:1px solid rgba(243,238,228,.28); outline-offset:5px; } .tr-n__screen--a{ right:6cqw; top:10cqh; height:26cqh; aspect-ratio:2.39/1; } .tr-n__screen--b{ right:22cqw; top:43cqh; height:23cqh; aspect-ratio:16/9; } .tr-n__screen--c{ right:6cqw; bottom:12cqh; height:32cqh; aspect-ratio:9/16; } @container (max-width: 460px){ .tr-n__route{ display:none; } .tr-n__glass{ outline-offset:3px; } } .tr-n__end{ position:absolute; left:-15px; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--green); } .tr-n__route{ position:absolute; left:-6px; top:calc(100% + 16px); font:600 10.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ivory); white-space:nowrap; } .tr-n__screen--c .tr-n__route{ left:auto; right:calc(100% + 22px); top:auto; bottom:0; } /* archive — contact sheet on a light table */ .tr--archive{ background:var(--navy-deep); display:flex; align-items:center; justify-content:center; } .sheet{ position:relative; width:min(84cqw, 125cqh); background:var(--paper); color:var(--navy); padding:22px 22px 18px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); } .sheet__edge{ display:flex; justify-content:space-between; font:600 9px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; } .sheet__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; } .sheet__cell{ position:relative; } .sheet__cell figure{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--stone); } .sheet__cell img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.15); } .sheet__cell span{ display:block; margin-top:5px; font:500 9px/1 var(--sans); letter-spacing:.1em; color:var(--muted); } .sheet__select{ position:absolute; pointer-events:none; border:2px solid var(--orange); transition:left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease); } .sheet__select::after{ content:''; position:absolute; right:-6px; top:-6px; width:10px; height:10px; border-radius:50%; background:var(--green); } /* editorial — default for future verticals */ .tr--editorial img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* ========================================================================== People ========================================================================== */ .facts{ display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(28px, 3vw, 44px); margin-left:calc((100% / 8) * 1 + var(--col-gap)); border-top:1px solid var(--rule); max-width:520px; } .facts > div{ flex:1 1 180px; padding:14px 18px 0 0; } .facts dt{ color:var(--muted); } .facts dd{ margin-top:6px; font-size:15.5px; } .team-index{ margin-top:clamp(70px, 9vw, 140px); } [data-team] .team-index__head{ margin-top:clamp(40px, 5vw, 76px); } .team-index__head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding-bottom:16px; } .team-list{ border-top:1px solid var(--rule); counter-reset:t; } .team-list li{ border-bottom:1px solid var(--rule); } .team-row{ position:relative; display:grid; grid-template-columns:70px minmax(0, 1.2fr) minmax(0, 1fr) 40px; align-items:baseline; gap:20px; padding:22px 0 20px; transition:padding .6s var(--ease); } .team-row__name{ font:400 clamp(28px, 3.1vw, 50px)/1 var(--serif); letter-spacing:-.02em; } .team-row__role{ font-size:16px; color:var(--muted); } .team-row .arrow{ justify-self:end; opacity:.45; } .team-row::before{ content:''; position:absolute; left:-2px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--orange); transform:scale(0); transition:transform .5s var(--ease); } .team-row:hover, .team-row:focus-visible{ padding-left:22px; } .team-row:hover::before, .team-row:focus-visible::before{ transform:none; } .team-row:hover .arrow{ opacity:1; } /* the portrait that follows the pointer over the team list */ .team-hover{ position:fixed; left:0; top:0; z-index:40; width:220px; pointer-events:none; opacity:0; scale:.94; transform-origin:0 0; transition:opacity .35s var(--ease-soft), scale .5s var(--ease); } .team-hover.is-on{ opacity:1; scale:1; } .team-hover .portrait{ box-shadow:0 30px 60px -30px rgba(6,18,90,.5); } /* ========================================================================== Posters Used by the Upcoming cards and the promoter's reel. ========================================================================== */ .poster{ --p-bg:var(--navy); --p-fg:var(--ivory); --p-soft:rgba(243,238,228,.5); position:relative; aspect-ratio:var(--ratio, 2/3); overflow:hidden; container-type:inline-size; background:var(--p-bg); color:var(--p-fg); isolation:isolate; } .poster--orange{ --p-bg:var(--orange); --p-fg:var(--navy); --p-soft:rgba(6,18,90,.45); } .poster--green { --p-bg:var(--green); --p-fg:var(--ivory); --p-soft:rgba(243,238,228,.55); } .poster--ivory { --p-bg:var(--paper); --p-fg:var(--navy); --p-soft:rgba(6,18,90,.4); box-shadow:inset 0 0 0 1px rgba(6,18,90,.18); } .poster--ink { --p-bg:var(--ink); --p-fg:var(--ivory); --p-soft:rgba(243,238,228,.45); } .poster--paper { --p-bg:var(--paper); --p-fg:var(--navy); --p-soft:rgba(6,18,90,.4); box-shadow:inset 0 0 0 1px rgba(6,18,90,.18); } /* unannounced titles carry no artwork and no colour — a quiet grey card */ .poster--grey { --p-bg:#E8E4DC; --p-fg:#4A4843; --p-soft:rgba(74,72,67,.34); box-shadow:inset 0 0 0 1px rgba(12,13,18,.08); } .poster--grey .dots i, .poster--grey .dots i + i{ background:currentColor; opacity:.5; } .poster--grey .poster__rule{ background:currentColor; opacity:.3; } .poster > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; transition:transform 1.6s var(--ease); } .poster--image::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(4,11,60,.15), rgba(4,11,60,.75)); } .poster__top{ position:absolute; left:7cqi; right:7cqi; top:7cqi; display:flex; justify-content:space-between; font:600 max(10px, 3.3cqi)/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; } .poster__title{ position:absolute; left:7cqi; right:7cqi; font:400 14cqi/.92 var(--serif); letter-spacing:-.03em; } .poster__billing{ position:absolute; left:7cqi; right:7cqi; bottom:13cqi; display:flex; flex-direction:column; align-items:center; gap:2.2cqi; } .poster__billing i{ display:block; height:max(1px, .55cqi); background:var(--p-soft); } .poster__foot{ position:absolute; left:7cqi; right:7cqi; bottom:5.5cqi; display:flex; justify-content:space-between; align-items:center; font:600 max(10px, 2.9cqi)/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--p-soft); } .poster__foot .dots{ font-size:30cqi; transform:none; margin:0; } .poster__rule{ position:absolute; left:7cqi; right:7cqi; --lw:max(2px, .9cqi); } /* composition variants */ .poster--v1 .poster__title{ bottom:30cqi; } .poster--v1 .poster__rule{ top:22cqi; width:22cqi; } .poster--v2 .poster__title{ top:20cqi; } .poster--v2 .poster__rule{ top:62cqi; } .poster--v3 .poster__title{ top:50%; transform:translateY(-60%); text-align:center; font-size:13.5cqi; } .poster--v3 .poster__rule{ top:22cqi; left:40cqi; right:40cqi; } .poster--image .poster__billing i{ background:rgba(243,238,228,.45); } .poster-link{ display:block; position:relative; } .poster-link .poster{ transition:transform 1s var(--ease); } .poster-link:hover .poster > img{ transform:scale(1.04); } .filter{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:clamp(40px, 5vw, 70px); padding-top:18px; border-top:1px solid var(--rule); } .filter button{ display:inline-flex; align-items:center; gap:9px; padding:6px 0; font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .filter button::before{ content:''; width:7px; height:7px; border-radius:50%; border:1px solid currentColor; transition:background .3s, border-color .3s; } .filter button[aria-pressed="true"]{ color:var(--fg); } .filter button[aria-pressed="true"]::before{ background:var(--orange); border-color:var(--orange); } /* ========================================================================== Journal entries ========================================================================== */ .news{ margin-top:clamp(40px, 5vw, 80px); } .news__intro{ grid-column:1 / span 4; } .news__list{ grid-column:6 / span 7; } .entries{ border-top:1px solid var(--rule); } .entry{ position:relative; border-bottom:1px solid var(--rule); } .entry__link{ display:grid; grid-template-columns:150px 1fr auto; gap:22px; padding:28px 0 30px; align-items:start; } .entry__link::before{ content:''; position:absolute; left:0; right:0; top:-3px; height:5px; background:linear-gradient(var(--orange) 0 1.5px, transparent 1.5px 3.5px, var(--green) 3.5px 5px); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease); } .entry__link:hover::before, .entry__link:focus-visible::before{ transform:none; } .entry__date{ display:flex; flex-direction:column; gap:10px; } .entry__day{ font:italic 400 19px/1 var(--serif); font-variant-numeric:lining-nums; } .entry__title{ font:400 clamp(24px, 2.3vw, 36px)/1.08 var(--serif); letter-spacing:-.015em; } .entry__excerpt{ margin-top:12px; color:var(--muted); max-width:52ch; font-size:17px; line-height:1.62; } .entry__read{ align-self:end; display:inline-flex; gap:10px; font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; } .entry .tag-placeholder{ margin-top:14px; } .empty{ padding:46px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:flex; gap:18px; align-items:baseline; } .empty p{ font:italic 400 clamp(22px, 2vw, 30px)/1.2 var(--serif); } /* ========================================================================== Contact ========================================================================== */ .contact{ padding-top:calc(var(--nav-h) + clamp(50px, 7vw, 110px)); } .contact .grid{ grid-template-rows:auto 1fr; } .contact__title{ grid-column:1 / span 6; grid-row:1; font-size:clamp(52px, 7.6vw, 136px); line-height:.9; } .contact__aside{ grid-column:1 / span 5; grid-row:2; margin-top:clamp(40px, 5vw, 70px); } .contact__form{ grid-column:8 / span 5; grid-row:1 / span 2; align-self:start; padding-top:clamp(0px, 1vw, 20px); } .field{ position:relative; padding-top:24px; border-bottom:1px solid var(--rule); transition:border-color .3s; } .field + .field, .field + fieldset, fieldset + .field{ margin-top:10px; } .field label, .field legend{ display:block; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .field input, .field textarea{ width:100%; border:0; background:transparent; color:var(--fg); padding:12px 0 14px; font:400 clamp(20px, 1.8vw, 26px)/1.3 var(--serif); letter-spacing:-.005em; border-radius:0; resize:vertical; } .field textarea{ min-height:120px; } .field input:focus, .field textarea:focus{ outline:none; } .field:focus-within{ border-color:var(--navy); } .field:focus-within::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:5px; background:linear-gradient(var(--orange) 0 1.5px, transparent 1.5px 3.5px, var(--green) 3.5px 5px); } .field.is-invalid{ border-color:#B3261E; } .field__error{ display:block; padding-bottom:10px; font-size:13px; color:#B3261E; } .topics{ border:0; margin:0; padding:26px 0 18px; border-bottom:1px solid var(--rule); } .topics legend{ padding:0; margin-bottom:16px; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .topics__list{ display:flex; flex-wrap:wrap; gap:10px 22px; } .topic{ position:relative; } .topic input{ position:absolute; opacity:0; width:1px; height:1px; } .topic span{ display:inline-flex; align-items:center; gap:9px; padding:6px 0; font-size:15.5px; cursor:pointer; } .topic span::before{ content:''; width:9px; height:9px; border-radius:50%; border:1px solid currentColor; transition:background .25s, border-color .25s; } .topic input:checked + span::before{ background:var(--orange); border-color:var(--orange); } .topic input:focus-visible + span{ outline:2px solid currentColor; outline-offset:3px; } .form__foot{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:34px; } .form__status{ font-size:14.5px; color:var(--muted); max-width:40ch; } .btn-send{ position:relative; display:inline-flex; align-items:center; gap:16px; padding:20px 30px; background:var(--navy); color:var(--ivory); font:600 12.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; overflow:hidden; } .btn-send::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(var(--orange) 0 2px, transparent 2px 3px, var(--green) 3px 5px); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); } .btn-send:hover::after, .btn-send:focus-visible::after{ transform:none; } .contact-lines{ margin-top:34px; } .contact-lines div + div{ margin-top:22px; } .contact-lines dd{ margin-top:6px; font:400 clamp(20px, 1.8vw, 26px)/1.3 var(--serif); white-space:pre-line; } /* ========================================================================== About ========================================================================== */ .about-intro__text{ grid-column:4 / span 8; } .about-intro__text .t-h2{ max-width:26ch; } .principles{ margin-top:clamp(40px, 6vw, 90px); border-top:1px solid var(--rule); } .principle{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); padding:clamp(28px, 3.4vw, 50px) 0; border-bottom:1px solid var(--rule); align-items:baseline; } .principle .index{ grid-column:1 / span 1; color:var(--muted); } .principle h3{ grid-column:2 / span 6; } .principle p{ grid-column:8 / span 5; color:var(--muted); font-size:16.5px; max-width:44ch; } .credits{ text-align:center; } .credits__block + .credits__block{ margin-top:clamp(34px, 4vw, 56px); } .credits dt{ color:var(--muted-on-navy); } .credits dd{ margin-top:10px; font:400 clamp(28px, 3.2vw, 54px)/1 var(--serif); letter-spacing:-.02em; } .credits__lead dd{ font-size:clamp(40px, 5vw, 86px); } .credits__pair{ display:flex; justify-content:center; gap:clamp(40px, 8vw, 140px); flex-wrap:wrap; } .biz-index{ border-top:1px solid var(--rule); margin-top:clamp(40px, 5vw, 70px); } .biz-index li{ border-bottom:1px solid var(--rule); } .biz-index a{ display:grid; grid-template-columns:70px 1fr minmax(0, 1fr) 40px; gap:20px; align-items:baseline; padding:22px 0; transition:padding .6s var(--ease); } .biz-index a:hover{ padding-left:16px; } .biz-index .t-h2{ letter-spacing:-.018em; } .biz-index p{ color:var(--muted); font-size:15.5px; max-width:44ch; } /* ========================================================================== Businesses overview + detail ========================================================================== */ .biz-band{ padding-block:clamp(60px, 7vw, 110px); border-top:1px solid var(--rule); } .biz-band__grid{ align-items:center; row-gap:40px; } .biz-band__text{ grid-column:1 / span 4; } .biz-band__title{ margin-top:20px; letter-spacing:-.02em; } .biz-band__text p{ margin-top:20px; } .biz-band__text .cta{ margin-top:30px; } .biz-band__view{ grid-column:6 / span 7; position:relative; aspect-ratio:16/10; } .biz-band:nth-child(even) .biz-band__text{ grid-column:9 / span 4; grid-row:1; } .biz-band:nth-child(even) .biz-band__view{ grid-column:1 / span 7; grid-row:1; } .biz-next{ border-top:1px dashed var(--rule); padding-block:clamp(50px, 6vw, 90px); } .biz-next__inner{ display:flex; align-items:baseline; gap:24px; flex-wrap:wrap; color:var(--muted); } .biz-next__inner .t-h1{ color:var(--fg); opacity:.28; } .biz-hero{ padding-top:calc(var(--nav-h) + clamp(40px, 6vw, 90px)); padding-bottom:clamp(50px, 6vw, 90px); } .biz-hero__title{ grid-column:1 / span 8; margin-top:clamp(24px, 3vw, 40px); } .biz-hero__summary{ grid-column:9 / span 4; align-self:end; } .biz-hero__view{ position:relative; margin-top:clamp(50px, 6vw, 90px); aspect-ratio:21/9; } .scope{ grid-column:7 / span 6; border-top:1px solid var(--rule); } .scope li{ display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:18px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--rule); font:400 clamp(24px, 2.4vw, 38px)/1.08 var(--serif); letter-spacing:-.015em; } .scope li .index{ grid-column:1; font-size:14px; color:var(--muted); } .people-mini{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:30px var(--col-gap); margin-top:40px; } .people-mini a{ display:block; } .people-mini .portrait{ --ratio:4/5; } .people-mini h3{ margin-top:14px; font:400 24px/1.1 var(--serif); } .people-mini p{ margin-top:6px; color:var(--muted); font-size:14.5px; } .pager{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding-block:clamp(50px, 6vw, 90px); border-top:1px solid var(--rule); } .pager a{ display:block; } .pager .t-h1{ margin-top:14px; transition:opacity .4s; } .pager a:hover .t-h1{ opacity:.7; } /* ========================================================================== Announcement + team pages ========================================================================== */ .slot{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:var(--ratio, 16/9); background:transparent; border:1px solid var(--rule); color:var(--muted); } .slot .crops{ color:var(--navy); opacity:.3; } .slot__label{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:20px; } .slot__label .t-serif{ font-style:italic; font-size:clamp(20px, 1.8vw, 26px); color:var(--fg); } /* Announcement detail */ .article{ grid-column:3 / span 8; } .article__title{ margin-top:30px; } .article__body{ margin-top:clamp(40px, 5vw, 70px); } .article__body p{ font-size:19px; line-height:1.65; max-width:62ch; } .article__body p + p{ margin-top:1.1em; } /* Team page — editorial portrait composition */ .lead-feature{ align-items:start; } .lead-feature__portrait{ grid-column:1 / span 6; } .lead-feature__body{ grid-column:7 / span 6; padding-top:clamp(20px, 6vw, 100px); } .lead-feature__name{ margin-top:22px; } .lead-feature__bio{ margin-top:34px; } .bio-slot{ margin-top:34px; padding:22px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:flex; gap:14px; align-items:baseline; color:var(--muted); } .bio-slot p{ font:italic 400 20px/1.3 var(--serif); color:var(--fg); } .ensemble{ margin-top:clamp(50px, 6vw, 90px); align-items:start; row-gap:clamp(44px, 5vw, 70px); } .member{ grid-column:span 3; position:relative; scroll-margin-top:calc(var(--nav-h) + 30px); } .member .portrait{ background:var(--stone); } .member__no{ display:block; margin-top:16px; color:var(--muted); } .member__name{ margin-top:8px; font:400 clamp(21px, 1.8vw, 28px)/1.1 var(--serif); letter-spacing:-.018em; } .member__role{ margin-top:8px; font-size:16px; line-height:1.5; color:var(--muted); } .member__years{ margin-top:9px; } /* ========================================================================== Coming soon + preview gate The orange line is on its way to the green point; the password lets it arrive. ========================================================================== */ .soon{ min-height:100vh; min-height:100svh; } .soon__main{ min-height:100vh; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; padding:clamp(22px, 3vw, 40px) var(--gutter) clamp(34px, 3.4vw, 48px); max-width:var(--max); margin-inline:auto; } .soon__top{ display:flex; justify-content:space-between; align-items:center; gap:20px; } .soon__logo{ width:clamp(96px, 9vw, 130px); height:auto; } .soon__stage{ align-self:center; padding-block:clamp(40px, 6vh, 90px); } .soon__title{ font-size:clamp(76px, 16vw, 280px); line-height:.86; letter-spacing:-.04em; text-transform:lowercase; } .soon__title .mask{ padding-bottom:.1em; margin-bottom:-.1em; } .soon__title .mask:last-child > span{ padding-left:.9em; } .soon__line{ position:relative; margin-top:clamp(34px, 5vh, 64px); height:12px; } .soon__track{ position:absolute; left:0; right:14px; top:50%; height:1px; background:var(--rule); } .soon__track i{ position:absolute; left:0; top:-.5px; height:2px; width:72%; background:var(--orange); transform-origin:left; transform:scaleX(0); transition:transform 2.6s var(--ease) .5s, width 1s var(--ease-io); } .soon__track b{ position:absolute; top:-4.5px; left:72%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--orange); opacity:0; transition:opacity .4s 2.6s, left 1s var(--ease-io); } .soon__track::before{ content:''; position:absolute; left:-5px; top:-4.5px; width:10px; height:10px; border-radius:50%; background:var(--orange); } .soon__end{ position:absolute; right:0; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; border:1.5px solid var(--green); transition:background .5s var(--ease) .8s; } .soon.is-ready .soon__track i{ transform:scaleX(1); } .soon.is-ready .soon__track b{ opacity:1; animation:soonPulse 2.8s ease-in-out 3.2s infinite; } @keyframes soonPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(241,138,50,.45); } 50%{ box-shadow:0 0 0 9px rgba(241,138,50,0); } } .soon.is-unlocking .soon__track i{ width:100%; } .soon.is-unlocking .soon__track b{ left:100%; animation:none; } .soon.is-unlocking .soon__end{ background:var(--green); } .js .soon .soon__title .mask > span{ transform:translateY(106%); } .soon.is-ready .soon__title .mask > span{ transform:none; transition:transform 1.4s var(--ease) .1s; } .soon.is-ready .soon__title .mask:last-child > span{ transition-delay:.22s; } .js .soon .soon__title .dots i{ transform:scale(0); } .soon.is-ready .soon__title .dots i{ transform:none; transition:transform .7s var(--ease) 1.3s; } .soon.is-ready .soon__title .dots i + i{ transition-delay:1.45s; } .js .soon .soon__foot > *{ opacity:0; transform:translateY(12px); } .soon.is-ready .soon__foot > *{ opacity:1; transform:none; transition:opacity 1s var(--ease-soft) 1.1s, transform 1.2s var(--ease) 1.1s; } .soon__foot{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); row-gap:28px; align-items:end; border-top:1px solid var(--rule); padding-top:26px; } .soon__intro{ grid-column:1 / span 4; font-size:15.5px; line-height:1.5; max-width:36ch; } .soon__form{ grid-column:7 / span 6; } .soon__form .field{ padding-top:0; } .soon__input{ display:flex; align-items:center; gap:14px; } .soon__input input{ flex:1; min-width:0; letter-spacing:.06em; } .soon__reveal{ padding:8px 0; color:var(--muted); } .soon__reveal:hover{ color:var(--fg); } .soon__actions{ display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:18px; } .soon__status{ font-size:14.5px; color:var(--muted); } .soon__form .field.is-invalid + .soon__actions .soon__status{ color:#B3261E; } .soon__open{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:20px; font-size:14.5px; } .soon__open .cta{ padding-block:4px 8px; } .soon__lock{ color:var(--muted); padding:4px 0; } .soon__copy{ grid-column:1 / -1; } .soon__end-rule{ position:fixed; left:0; right:0; bottom:0; --lw:3px; } @media (max-width: 899px){ .soon__tag{ display:none; } .soon__title{ font-size:clamp(70px, 23vw, 160px); } .soon__title .mask:last-child > span{ padding-left:.5em; } .soon__foot{ grid-template-columns:1fr; } .soon__intro, .soon__form, .soon__copy{ grid-column:1 / -1; } .soon__actions{ flex-direction:row-reverse; justify-content:flex-end; flex-wrap:wrap; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1100px){ .nav__primary ul{ gap:22px; } .sector__link{ grid-template-columns:44px 92px minmax(0,1fr) 34px; } .sector__format{ display:none; } .promo__name{ font-size:clamp(40px, 5.2vw, 72px); } } @media (max-width: 899px){ :root{ --nav-h:68px; } .nav__primary{ display:none; } .nav__menu{ display:inline-flex; } .nav__logo img{ height:40px; } .drawer{ display:none; } .grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } .grid > *{ grid-column:1 / -1 !important; } .page-head__lede{ margin-top:28px; } /* opening: stacked — type, then the image, then the index */ .hero__inner{ display:block; padding-top:calc(var(--nav-h) + 34px); } .hero__text{ text-align:left; } .hero__deva{ font-size:clamp(150px, 46vw, 260px); } .hero__logo{ width:clamp(170px, 46vw, 250px); } .hero__intro{ max-width:none; font-size:17px; } .hero__still{ margin:clamp(30px, 5vw, 48px) calc(var(--gutter) * -1) 0; } .hero__line{ font-size:clamp(24px, 6.8vw, 34px); } .hero__still-media{ aspect-ratio:4/3; max-height:none; } .hero__still-media img{ object-position:50% 60%; } /* tap targets */ .cta{ padding:12px 0 15px; } .footer__col li + li{ margin-top:4px; } .footer__col a{ display:inline-block; padding-block:7px; } .footer__bottom a{ display:inline-block; padding-block:8px; } .menu__sub a{ padding-block:12px; } .sh-social a{ padding:8px 0; } .yearbar a{ padding-block:11px; } .namelist li{ padding-block:3px; } .workgroup__head{ flex-wrap:wrap; gap:10px 14px; } .workgroup__note{ width:100%; order:3; } .workgroup__rule{ min-width:40px; } .hero__index{ display:block; margin-top:clamp(34px, 6vw, 50px); } .hero__index a{ border-right:0; border-bottom:1px solid var(--rule); padding:14px 0 13px; } .hero__index a:last-child{ border-bottom:0; } .about-k__glyph{ font-size:46vw; right:-.18em; opacity:.045; } .about-k__statement{ font-size:clamp(34px, 10.6vw, 60px); } .whatrow{ display:block; margin-top:34px; } .whatrow li{ border-right:0; border-bottom:1px solid var(--rule); } .whatrow li:last-child{ border-bottom:0; } .whatrow a{ padding:14px 0 13px; } .partner{ grid-template-columns:1fr; } .counts{ grid-template-columns:repeat(2, minmax(0,1fr)); } .offices__row{ grid-template-columns:34px minmax(0,1fr); gap:6px 14px; } .offices__cities{ grid-column:2; font-size:15.5px; } dialog.offices{ width:100vw; max-height:92vh; } .logowall{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px 20px; } .logowall li{ height:38px; } /* the promoter's reel becomes a swipeable row */ .promo__reel-label{ margin-top:10px; } .reel{ display:flex; height:auto; gap:14px; overflow-x:auto; margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) 10px; scroll-snap-type:x mandatory; scrollbar-width:none; } .reel::-webkit-scrollbar{ display:none; } .reel__col{ flex:0 0 52%; overflow:visible; scroll-snap-align:start; } .reel__strip{ animation:none !important; gap:14px; } .reel__card:nth-child(n+3){ display:none; } .reel__fade{ display:none; } .sector__link{ grid-template-columns:34px 84px minmax(0,1fr) 22px; gap:16px; padding:18px 0; } .sector__title{ font-size:clamp(24px, 7vw, 34px); } .sector__summary{ font-size:14px; } .up-card{ grid-column:span 3 !important; } .up-card__title{ font-size:19px; } .sh-hero__portrait{ grid-column:1 / span 4 !important; } .sh-about__still{ grid-column:1 / span 4 !important; } .sh-figures{ grid-template-columns:repeat(2, minmax(0,1fr)); } .sh-now__still{ grid-column:1 / span 3 !important; margin-top:40px; } .roots{ padding-left:var(--root-w); --root-w:34px; } .yeargroup__node{ right:calc(100% + 6px); } .sh-work__statement{ grid-column:1 / span 6 !important; } .title-card{ grid-column:span 3 !important; } .title-card__cast{ display:none; } .yearbar{ margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .yearbar::-webkit-scrollbar{ display:none; } .yearbar a{ flex:none; } .team-row{ grid-template-columns:44px 1fr 20px; row-gap:6px; } .team-row__role{ grid-column:2; grid-row:2; } .team-row .arrow{ grid-column:3; grid-row:1; } .team-index__head{ flex-direction:column; align-items:flex-start; gap:18px; } .news__list{ margin-top:40px; } .entry__link{ grid-template-columns:1fr; gap:14px; } .entry__read{ align-self:start; } .footer__brand, .footer__col, .footer__contact{ grid-column:span 3 !important; } .footer__brand{ grid-column:1 / -1 !important; } .contact__form{ grid-row:auto; margin-top:50px; } .principle .index{ grid-column:1 / -1; } .principle h3, .principle p{ grid-column:1 / -1; } .principle p{ margin-top:14px; } .biz-band:nth-child(even) .biz-band__text, .biz-band:nth-child(even) .biz-band__view{ grid-row:auto; } .biz-band__view{ aspect-ratio:4/3; } .biz-hero__summary{ margin-top:28px; } .biz-hero__view{ aspect-ratio:4/3; } .biz-index a{ grid-template-columns:44px 1fr 20px; } .biz-index p{ grid-column:2; } .article{ grid-column:1 / -1 !important; } .lead-feature__portrait{ grid-column:1 / span 5 !important; } .ensemble{ row-gap:50px; } .member{ grid-column:span 3 !important; margin-top:0 !important; } .tr__meta{ left:14px; right:14px; } .tr__meta--top{ top:14px; } .tr__meta--bottom{ bottom:14px; } .sheet{ width:92%; padding:14px; } .sheet__grid{ gap:6px; } .sheet__cell span{ display:none; } } @media (max-width: 560px){ .hero__line{ font-size:6.4vw; } .t-display{ font-size:clamp(40px, 12.4vw, 64px); } .t-h1{ font-size:clamp(34px, 10vw, 52px); } .sector__link{ grid-template-columns:28px minmax(0,1fr) 18px; } .sector__media{ display:none; } .up-grid{ row-gap:40px; } .reel__col{ flex:0 0 68%; } .tr--network .tr-n__route{ font-size:9px; letter-spacing:.12em; } .sheet__grid{ grid-template-columns:repeat(3, 1fr); } .sheet__cell:nth-child(n+10){ display:none; } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important; } .reel__strip, .tr-v__strip, .tr-n__lines path{ animation:none !important; } html.veil-on body::after{ display:none; } } /* ---- Justified text ---- Running copy is justified and hyphenated; headlines, labels and anything deliberately centred stay as they are. */ main p, .footer p{ text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; } main p.t-display, main p.t-h1, main p.t-h2, main p.t-h3, main p.t-serif, main p.t-mega, main p.meta, main p.index, main p.hero__line, main p.member__no, main p.entry__day, main p.up-card__sub, main p.footer__end, .credits p, .slot p, .poster p, .title-art p{ text-align:left; hyphens:manual; -webkit-hyphens:manual; } /* the lead sentence beside a business's scope list: readable, not a headline */ .scope-lede{ font-size:clamp(19px, 1.6vw, 24px); line-height:1.4; letter-spacing:-.012em; text-align:justify; hyphens:auto; -webkit-hyphens:auto; } .people-mini > *{ display:block; } main .people-mini p, main .member p, main .promo__caption p{ text-align:left; hyphens:manual; -webkit-hyphens:manual; } /* narrow phones: big serif lead lines stay ragged-right; hyphenation is not reliable enough there */ @media (max-width:560px){ main .scope-lede, main p.t-lede{ text-align:left; hyphens:manual; -webkit-hyphens:manual; } } /* press release: where to follow */ .article__follow{ margin-top:clamp(36px, 4vw, 56px); padding-top:24px; border-top:1px solid var(--rule); max-width:62ch; } .article__follow ul{ margin-top:14px; } .article__follow li{ display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--rule); font-size:17px; } .article__follow a{ text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:5px; text-decoration-thickness:1.5px; } .article__follow a:hover{ color:var(--navy); text-decoration-color:var(--green); } main .article__follow p, main .article__follow li{ text-align:left; hyphens:manual; } .logo-note{ margin-top:clamp(30px, 3.6vw, 48px); } main p.logo-note{ text-align:left; hyphens:manual; } /* contact: the vertical picker reads as a set of choices */ .topics__hint{ margin:-6px 0 16px; font-size:14.5px; color:var(--muted); } .topics__list{ gap:10px; } .topic span{ padding:12px 18px; border:1px solid var(--rule); transition:background .25s, color .25s, border-color .25s; } .topic span::before{ display:none; } .topic:hover span{ border-color:var(--navy); } .topic input:checked + span{ background:var(--navy); border-color:var(--navy); color:var(--ivory); } .topic input:checked + span::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--orange); }