@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/font-0.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/font-1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/font-0.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/font-1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/font-0.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/font-1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }  @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/font-2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }  @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/font-3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }  @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/font-2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }  @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/font-3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }  :root { --paper:#f3f1eb; --ink:#111; --green:#0c1713; --muted:#676963; --line:#c9c7c0; --white:#f8f7f2; } * { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased } a { text-decoration:none; color:inherit } button { font:inherit } .site { width:min(100%,1440px); max-width:1440px; margin:0 auto; position:relative; overflow:hidden } .container { width:89.06%; max-width:1282.5px; margin-left:auto; margin-right:auto } .reveal { opacity:1; transform:none; } .reveal.in { opacity:1; transform:none } header { position:absolute; z-index:20; top:0; left:0; right:0; height:67px } .nav { height:67px; display:flex; align-items:center } .brand { font-size:17px; letter-spacing:.17em } .links { margin-left:auto; display:flex; gap:31px; margin-right:34px } .links a { font-size:9px; letter-spacing:.14em; text-transform:uppercase; position:relative } .links a:after { content:""; position:absolute; left:0; right:100%; bottom:-6px; border-top:1px solid; transition:.2s } .links a:hover:after { right:0 } .tools { display:flex; align-items:center; gap:20px } .burger { width:22px; height:17px; border:0; background:none; position:relative; cursor:pointer } .burger:before,.burger:after { content:""; position:absolute; left:0; right:0; border-top:1px solid } .burger:before { top:1px } .burger:after { top:15px } .hero { height:min(760px,41vw); min-height:570px; position:relative; overflow:hidden; background:none center/cover no-repeat } .hero:before { content:""; position:absolute; inset:0; background:transparent; pointer-events:none } .hero-content { height:100%; position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding-top:35px } .hero h1 { font-weight:400; font-size:clamp(54px,6vw,88px); line-height:.96; letter-spacing:-.055em; margin:28px 0 12px } .hero p { font-size:15px; line-height:1.45; margin:0 } .hero-note { position:absolute; right:5.5%; bottom:42px; color:#fff; font-size:10px; line-height:1.45; z-index:2 } .hero-note:before { content:""; display:block; width:20px; border-top:1px solid white; margin-bottom:10px } .menu { position:fixed; top:67px; right:max(20px,calc((100vw - 1440px)/2 + 20px)); width:310px; box-sizing:border-box; padding:30px 32px 34px; background:#0d1713; color:#fff; z-index:50; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity .22s ease,transform .22s ease,visibility .22s ease; box-shadow:0 12px 32px rgba(0,0,0,.16) } .menu.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) } .menu nav { display:flex; flex-direction:column; gap:18px; padding-top:18px } .menu nav a { font-size:12px; letter-spacing:.14em; text-transform:uppercase } .menu nav a:after { display:none } .menu-socials { display:none } @media(max-width:900px) { .menu-socials { display:flex; gap:18px; margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.28); } .menu-socials a { display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:11px; letter-spacing:.08em; } .menu-socials svg, .menu-socials .threads-mark { width:17px; height:17px; flex:0 0 17px; } .menu-socials svg { fill:none; stroke:currentColor; stroke-width:1.7; } .menu-socials .threads-mark { display:inline-flex; align-items:center; justify-content:center; border:1.3px solid currentColor; border-radius:50%; font-size:12px; font-weight:600; line-height:1; } } @media(min-width:901px) { .hero { height:clamp(420px,41.015625vw,590.625px); min-height:0; max-height:none } } @media(max-width:900px) { .links { display:none } .hero { height:700px } .hero-content { justify-content:flex-end; padding-bottom:62px } .hero h1 { font-size:59px } } @media(max-width:560px) { .container { width:88% } .hero { height:670px; min-height:0 } .hero h1 { font-size:47px } .hero p { font-size:13px } .hero-note { display:none } .menu { right:16px; width:calc(100vw - 32px); max-width:310px } .menu nav a { font-size:12px } } @media(min-width:901px) { .site { width:100%; max-width:1440px; margin:0 auto } .container { width:89.06%; max-width:1282.5px } header { height:67px } .nav { height:67px } .hero { height:590.625px } .hero-content { padding-top:8px } .hero h1 { font-size:82px; line-height:.96; margin:27px 0 13px; letter-spacing:-.055em } .hero p { font-size:14px; line-height:1.42 } } @media(min-width:901px) { .container { width:89.06%; max-width:1282.5px } .hero h1 { font-size:clamp(54px,5.02vw,72.3px); line-height:.96; letter-spacing:-.055em; margin:28px 0 13px } .hero p { font-size:clamp(15px,.98vw,14.1px) } .hero-note { font-size:clamp(10px,.67vw,9.6px) } } header { color:#fff; mix-blend-mode:difference; } header .brand,header .links a,header .burger { color:#fff; } header .links a:after { border-color:currentColor; } @media(max-width:900px) { header { mix-blend-mode:difference; } } @media (min-width:901px) { .site > header:not(.is-scrolled) { position:absolute; inset:0 0 auto; width:100%; max-width:none; transform:none; } .hero { height:41vw; min-height:520px; max-height:700px; background-position:center; background-size:cover; } .hero:before { background:linear-gradient(90deg, rgba(4,20,29,.66) 0%, rgba(4,20,29,.39) 37%, rgba(4,20,29,.08) 70%, rgba(4,20,29,0) 100%); } .hero-content { justify-content:flex-start; padding-top:clamp(112px, 8.5vw, 164px); } .hero-kicker { display:flex; align-items:flex-start; flex-direction:column; gap:1px; font-size:9px; font-weight:600; letter-spacing:.15em; line-height:1.4; } .hero-kicker:before { display:none; } .hero h1 { margin:42px 0 0; font-size:clamp(68px, 5vw, 86px); line-height:.86; letter-spacing:-.04em; } .hero .hero-subtitle { margin-top:21px; font-size:12px; line-height:1.42; letter-spacing:.01em; } .hero-topics { margin-top:26px; font-size:8px; letter-spacing:.16em; } .hero-aside { top:52%; } .hero-scroll { bottom:8%; } } @media (min-width:901px) { .hero-aside { top:51.5%; right:5.5%; width:0; } .hero-coordinates { width:132px; transform:translateX(-50%); text-align:center; font-size:8px; font-weight:600; letter-spacing:.18em; line-height:1.7; } .hero-coordinates:after { width:25px; margin:15px auto 0; } .hero-scroll { display:block; width:0; height:160px; right:5.5%; bottom:5.2%; } .hero-scroll:before { content:""; position:absolute; top:0; right:0; height:61px; border-left:1px solid currentColor; } .hero-scroll > span:last-child { position:absolute; top:75px; right:-32px; left:auto; width:64px; display:block; text-align:center; font-size:8px; font-weight:600; line-height:1.55; letter-spacing:.18em; } .hero-scroll b { position:absolute; top:109px; right:-19px; width:38px; font-size:38px; font-weight:300; line-height:.7; text-align:center; } } @media (min-width:901px) { .hero-aside, .hero-scroll { left:auto !important; right:5.5% !important; width:0 !important; transform:none !important; } .hero-coordinates { position:absolute; top:0; right:-66px; width:132px; transform:none; text-align:center; } .hero-coordinates:after { margin:15px auto 0; } .hero-scroll:before { right:0; } .hero-scroll > span:last-child { right:-32px; left:auto; width:64px; text-align:center; } .hero-scroll b { right:-19px; width:38px; text-align:center; } } @media (min-width:901px) { .hero-aside { top:51.5%; right:5.5%; width:0; } .hero-coordinates { width:132px; transform:translateX(-50%); text-align:right; text-align:center; font-size:8px; font-weight:600; letter-spacing:.18em; line-height:1.7; } .hero-coordinates:after { width:25px; margin-top:15px; margin-left:auto; margin-right:auto; } .hero-scroll { display:block; width:0; height:160px; right:5.5%; bottom:5.2%; } .hero-scroll:before { content:""; position:absolute; top:0; right:0; height:61px; border-left:1px solid currentColor; } .hero-scroll > span:last-child { position:absolute; top:75px; right:-32px; left:auto; display:block; width:64px; text-align:center; font-size:8px; font-weight:600; line-height:1.55; letter-spacing:.18em; } .hero-scroll b { position:absolute; top:109px; right:-19px; width:38px; font-size:38px; font-weight:300; line-height:.7; text-align:center; } } @media (min-width:901px) { .hero-aside { top:51.5%; right:5.5%; width:112px; } .hero-coordinates { text-align:right; font-size:8px; font-weight:600; letter-spacing:.18em; line-height:1.7; } .hero-coordinates:after { width:25px; margin-top:15px; margin-left:auto; } .hero-scroll { display:block; width:112px; height:160px; right:5.5%; bottom:5.2%; } .hero-scroll:before { content:""; position:absolute; top:0; right:0; height:61px; border-left:1px solid currentColor; } .hero-scroll > span:last-child { position:absolute; top:75px; left:auto; right:-32px; display:block; width:64px; text-align:left; text-align:center; font-size:8px; font-weight:600; line-height:1.55; letter-spacing:.18em; } .hero-scroll b { position:absolute; top:109px; right:-19px; width:38px; font-size:38px; font-weight:300; line-height:.7; text-align:center; } } @media (min-width:901px) { .hero-aside { top:51.5%; right:5.5%; width:112px; } .hero-coordinates { font-size:8px; font-weight:600; letter-spacing:.18em; line-height:1.7; } .hero-coordinates:after { width:25px; margin-top:15px; margin-left:auto; } .hero-scroll { display:block; width:128px; height:160px; right:5.5%; bottom:5.2%; } .hero-scroll:before { content:""; position:absolute; top:0; right:12px; height:61px; border-left:1px solid currentColor; } .hero-scroll > span:last-child { position:absolute; top:75px; left:0; display:block; text-align:left; font-size:8px; font-weight:600; line-height:1.55; letter-spacing:.18em; } .hero-scroll b { position:absolute; top:109px; right:0; font-size:38px; font-weight:300; line-height:.7; } } .burger-close { display:none; } .burger.is-open .burger-lines { display:none; } .burger.is-open .burger-close { display:block; } @media (min-width:901px) { header .tools, .menu { display:none !important; } } @media (max-width:900px) { header .tools { display:flex; margin-left:auto; } header .burger { display:block !important; } } @media(min-width:901px) { .hero-note { font-size:11.5px; line-height:1.45; } } .menu nav a { font-size:15px; letter-spacing:.14em; } @media(max-width:560px) { .menu nav a { font-size:14px; } } @media(min-width:901px) { header .nav { position:relative; } header .links { position:absolute; left:50%; transform:translateX(-50%); margin:0; gap:31px; } header .tools { margin-left:auto; } header .burger { display:none !important; } } @media(max-width:900px) { header .links { display:none !important; } header .burger { display:block !important; } } @media(min-width:901px) { header .nav { position:relative; } header .links { position:absolute; left:50%; transform:translateX(-50%); margin:0; gap:34px; } header .burger { display:none !important; } header .tools { margin-left:auto; } } @media(max-width:900px) { header .links { display:none !important; } header .burger { display:block !important; } } @media(max-width:900px) { header .nav { position:relative; } header .burger { display:block !important; margin-left:auto; } header .tools { margin-left:auto; } .hero { background-position:right center; } } @media(max-width:560px) { .menu { right:16px; left:auto; } } .hero-content h1,.hero-content p,.hero-note { transition:color .12s linear; text-shadow:none!important } .hero-note:before { transition:border-color .12s linear } .hero-note:before { border-top-color:var(--hero-note-color,#fff)!important } .hero-content h1, .hero-content p { color:var(--hero-text-color,#111513) !important; mix-blend-mode:normal !important; transition:color .18s ease, border-color .18s ease; } .hero-content { z-index:auto; } @media (max-width: 900px) { .hero { min-height: 100vh; min-height: 100dvh; height: 100dvh; } } @media (max-width:768px) { .hero { background-position:center center; background-size:auto 120%; } } .burger { width: 24px; height: 18px; } .burger:before,.burger:after { left: auto; right: 0; border-top-width: 1px; } .burger:before { width: 22px; top: 1px; } .burger:after { width: 14px; top: 15px; } .burger { width:24px !important; height:18px !important; background-image:none; background-repeat:no-repeat; background-position:center; background-size:24px 18px; border:0; } .burger:before, .burger:after { display:none !important; } .burger { width:24px !important; height:18px !important; background-image:none; } .burger:before, .burger:after { display:none !important; } .burger-icon { display:block; width:24px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:square; } @media (min-width:901px) { header .links { gap:31px; } header .burger { display:block !important; margin-left:0; } } @media (min-width:901px) { header .tools, .menu { display:none !important; } } @media (max-width:900px) { header .tools { display:flex !important; margin-left:auto; } header .burger { display:block !important; } } .menu-socials svg, .menu-socials .threads-mark { width:20px !important; height:20px !important; flex:0 0 20px; } .menu-socials .threads-mark { border-width:1.7px; } .menu-socials svg { stroke-width:1.7 !important; } .menu-socials .threads-mark { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; border-color:currentColor; border-width:1.7px !important; border-style:solid; border-radius:50%; font-size:14px; font-weight:600; line-height:1; } @media (max-width:768px) { .hero { background-position:right center; background-size:cover; } } @media (max-width:900px) and (orientation:portrait) { .hero { background-position:right center; background-size:cover; } } @media (min-width:901px) { .hero h1 { font-size:clamp(58px,4.55vw,65.5px); line-height:1.03; letter-spacing:-.052em; margin:24px 0 15px; } } header { position:fixed; left:50%; right:auto; width:100%; max-width:1440px; transform:translateX(-50%); background:transparent; color:#fff; mix-blend-mode:difference; box-shadow:none; transition:background .2s ease, box-shadow .2s ease; } header.is-scrolled { background:#0d1713; mix-blend-mode:normal; box-shadow:0 1px 0 rgba(255,255,255,.13); } header .brand, header .links a, header .burger { color:#fff; } .hero-kicker { width:max-content; color:var(--hero-text-color,#f7f5f0); font-size:9px; font-weight:600; letter-spacing:.08em; line-height:1.35; text-transform:uppercase; } .hero-topics { width:max-content; margin-top:22px; color:var(--hero-text-color,#f7f5f0); font-size:8px; font-weight:500; letter-spacing:.15em; line-height:1.4; text-transform:uppercase; } .hero .hero-subtitle { margin:18px 0 0; font-size:11px; font-weight:500; letter-spacing:.02em; line-height:1.55; } .hero-scroll { position:absolute; right:5.5%; bottom:32px; color:#f7f5f0; font-size:9px; font-weight:500; letter-spacing:.17em; line-height:1.4; } .hero-scroll span { display:block; margin-top:5px; font-size:30px; letter-spacing:.08em; line-height:1; } .hero-coordinates { position:absolute; right:5.5%; top:51%; color:#f7f5f0; font-size:9px; font-weight:500; letter-spacing:.12em; line-height:1.65; text-align:right; } .hero-content .hero-kicker, .hero-content .hero-topics { transition:color .18s ease; } @media (min-width:901px) { .hero-content { justify-content:center; padding-top:52px; } .hero h1 { margin:20px 0 0; max-width:420px; font-size:clamp(62px,5.1vw,74px); font-weight:600; line-height:.9; letter-spacing:-.06em; } } @media (max-width:900px) { .hero-content { justify-content:flex-end; padding-bottom:88px; padding-top:0; } .hero h1 { margin:24px 0 15px; } .hero .hero-subtitle { font-size:12px; } .hero-topics { margin-top:17px; font-size:7px; letter-spacing:.12em; } .hero-coordinates { top:43%; } .hero-scroll { bottom:25px; } } .hero:before { z-index:1; background:linear-gradient(90deg, rgba(9,18,17,.56) 0%, rgba(9,18,17,.35) 34%, rgba(9,18,17,.04) 70%); } .hero-content, .hero-coordinates, .hero-scroll { z-index:2; } .brand { display:flex; align-items:center; gap:12px; } .brand-mark { display:inline-grid; place-items:center; width:28px; height:31px; font-size:25px; font-weight:600; letter-spacing:-.23em; line-height:1; } .brand-copy { display:flex; flex-direction:column; font-size:10px; font-weight:600; letter-spacing:.18em; line-height:1.2; } .brand-copy small { margin-top:4px; font-size:7px; font-weight:500; letter-spacing:.13em; } @media (min-width:901px) { .site > header, .site .hero { width:100vw; margin-left:calc(50% - 50vw); } .site > header { left:50%; right:auto; margin-left:0; transform:translateX(-50%); } .site .hero .hero-content { width:89.06%; max-width:none; } .site > header .nav { position:relative; display:block; width:100vw; max-width:none; height:67px; margin:0; padding:0 5.5vw; box-sizing:border-box; } .site > header .brand { position:absolute; top:17px; left:0; display:flex; color:#f7f5f0; } .site > header .links { position:absolute; top:27px; right:0 !important; left:auto !important; transform:none !important; margin:0; gap:23px; } .hero { background-position:right center; background-size:auto 110%; } .hero-content { justify-content:flex-start; padding-top:76px; } .hero h1 { margin-top:20px; font-size:clamp(68px,5.8vw,88px); line-height:.91; } } .hero:before { background:linear-gradient(90deg, rgba(7,16,20,.8) 0%, rgba(7,16,20,.58) 42%, rgba(7,16,20,.22) 100%); } .hero .hero-kicker, .hero .hero-kicker *, .hero h1, .hero .hero-subtitle, .hero .hero-topics { color:#f7f5f0 !important; } header:not(.is-scrolled) { mix-blend-mode:normal; } header:not(.is-scrolled) .brand { color:#f7f5f0; } @media (min-width:901px) { header:not(.is-scrolled) .links a { color:#111513; } } .brand-mark { letter-spacing:-.3em; transform:translateY(-1px); } .hero { height:100vh; min-height:640px; background-color:transparent; background-blend-mode:normal; } .hero:before { background:linear-gradient(90deg, rgba(5,22,30,.42) 0%, rgba(5,22,30,.2) 43%, rgba(5,22,30,.05) 100%); } .hero-kicker { display:flex; align-items:center; gap:18px; font-size:10px; letter-spacing:.17em; line-height:1; } .hero-kicker:before { content:""; width:28px; border-top:1px solid currentColor; } .hero .hero-subtitle { margin-top:25px; font-size:15px; font-weight:400; letter-spacing:.025em; line-height:1.55; } .hero-topics { margin-top:37px; font-size:9px; letter-spacing:.2em; } .hero-aside { position:absolute; z-index:2; top:48%; right:5.5%; width:170px; color:#f7f5f0; } .hero-coordinates { position:static; color:inherit; font-size:9px; font-weight:500; letter-spacing:.16em; line-height:1.65; text-align:left; } .hero-note { display:none; } .hero-note:before { width:27px; margin-bottom:18px; border-top-color:currentColor !important; } .hero-scroll { display:flex; flex-direction:column; align-items:center; right:5.5%; left:auto; bottom:7%; color:#f7f5f0; font-size:9px; font-weight:500; letter-spacing:.18em; line-height:1.55; } .hero-scroll .hero-index, .hero-scroll i { display:none; } .hero-scroll b { font-size:31px; font-weight:400; line-height:.7; order:2; } .hero-scroll > span:last-child { order:1; margin:0; font-size:9px; line-height:1.55; letter-spacing:.18em; text-align:center; } .hero-coordinates:after { content:""; display:block; width:23px; margin-top:17px; border-top:1px solid currentColor; } .hero-manifesto { display:none; } header:not(.is-scrolled) .links a.active:after { right:0; } header .links a.notes-link { display:inline !important; } @media (min-width:901px) { .hero { background-position:right center; background-size:cover; height:46vw; min-height:580px; max-height:760px; } .hero-content { justify-content:center; padding-top:8vh; } .hero h1 { width:auto; max-width:none; margin-top:33px; font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-size:clamp(74px,6.35vw,108px); font-weight:700; line-height:.87; letter-spacing:-.035em; } .hero-aside { width:100px; } header .links { left:auto; right:0; transform:none; gap:23px; margin:0; } } @media (max-width:900px) { .hero { background-blend-mode:multiply; } .hero-content { padding-bottom:110px; } .hero-aside, .hero-manifesto { display:none; } .hero-scroll { right:7%; left:auto; bottom:34px; } .hero .hero-subtitle { font-size:13px; } .hero-topics { margin-top:27px; font-size:8px; letter-spacing:.14em; } } @media (min-width:901px) and (prefers-reduced-motion:no-preference) { .hero { animation:none; } .hero-content { animation:nordic-copy .7s .12s ease-out both; } } @keyframes nordic-copy { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } @media (min-width:901px) { .site > header .nav { display:flex; align-items:center; justify-content:space-between; } .site > header .brand { position:static; z-index:1; flex:0 0 auto; } .site > header .links { position:static !important; display:flex !important; flex:0 0 auto; margin-left:auto !important; transform:none !important; } .site > header .tools { display:none; } } @media (min-width:901px) { .site > header, .site .hero { width:auto; margin-left:0; transform:none; } .site > header { left:0; right:0; } .site > header .nav { width:89.06%; max-width:1282.5px; height:67px; margin-left:auto; margin-right:auto; padding:0; } .site .hero .hero-content { width:89.06%; max-width:1282.5px; } } @media (min-width:901px) { .hero-aside, .hero-scroll { left:auto !important; right:5.5% !important; width:0 !important; transform:none !important; } .hero-aside { top:51.5% !important; } .hero-scroll { bottom:5.2% !important; } .hero-coordinates { position:absolute !important; top:0 !important; right:-66px !important; width:132px !important; transform:none !important; text-align:center !important; } .hero-coordinates:after { margin:15px auto 0 !important; } .hero-scroll:before { right:0 !important; } .hero-scroll > span:last-child { right:-32px !important; left:auto !important; width:64px !important; text-align:center !important; } .hero-scroll b { right:-19px !important; width:38px !important; text-align:center !important; } .site > header:not(.is-scrolled) { position:absolute; inset:0 0 auto; width:100%; max-width:none; transform:none; } .hero { height:41vw; min-height:520px; max-height:700px; background-position:center; background-size:cover; } .hero:before { background:linear-gradient(90deg, rgba(4,20,29,.66) 0%, rgba(4,20,29,.39) 37%, rgba(4,20,29,.08) 70%, rgba(4,20,29,0) 100%); } .hero-content { justify-content:flex-start; padding-top:clamp(112px, 8.5vw, 164px); } .hero-kicker { display:flex; align-items:flex-start; flex-direction:column; gap:1px; font-size:9px; font-weight:600; letter-spacing:.15em; line-height:1.4; } .hero-kicker:before { display:none; } .hero h1 { margin:42px 0 0; font-size:clamp(68px, 5vw, 86px); line-height:.86; letter-spacing:-.04em; } .hero .hero-subtitle { margin-top:21px; font-size:12px; line-height:1.42; letter-spacing:.01em; } .hero-topics { margin-top:26px; font-size:8px; letter-spacing:.16em; } .hero-aside { top:52%; } .hero-scroll { bottom:8%; } } .site .hero { background-image:url('assets/nordic-hero.webp'); background-size:cover; background-position:center; background-blend-mode:normal; } .site .hero .hero-kicker, .site .hero h1, .site .hero .hero-subtitle, .site .hero .hero-topics { --hero-text-color:#f7f5f0; color:#f7f5f0 !important; } .brand img.brand-mark { display:block; object-fit:contain; flex:0 0 auto; } @media(max-width:900px) { .site .hero { background-position:42% center; } } .site .hero h1 { font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:800; line-height:1.08; letter-spacing:-.015em; overflow:visible; } @media(min-width:901px) { .site .hero h1 { margin-top:32px; } } .identity { background:#f3f1eb; color:#17201e; padding:76px 5.5% 0 } .identity-main { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0,1.1fr); gap:9%; align-items:center } .identity-portrait { margin:0; position:relative; align-self:stretch; min-height:510px; background:#26302e; overflow:hidden } .identity-portrait>img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:left center; filter:grayscale(1) } .identity-portrait figcaption { position:absolute; bottom:0; left:0; right:0; padding:18px 22px; background:#101b19; color:#fff; display:flex; justify-content:space-between; gap:16px; font-size:11px; letter-spacing:.15em } .identity-portrait figcaption span { opacity:.7 } .identity-story { padding:10px 0 16px } .identity-eyebrow { display:flex; align-items:center; gap:18px; font-size:12px; letter-spacing:.17em; margin:0 0 25px } .identity-eyebrow:after { content:''; width:42px; border-top:1px solid #737972 } .identity-story h2 { font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:800; font-size:clamp(56px,5.9vw,84px); line-height:1.04; letter-spacing:-.025em; margin:0 0 26px } .identity-lead { font-size:20px; line-height:1.5; max-width:400px; margin:0 0 14px } .identity-description { font-size:16px; line-height:1.75; color:#535b57; max-width:430px; margin:0 } .identity-link { display:inline-flex; align-items:center; gap:40px; border-bottom:1px solid #9ca19a; padding:13px 0; margin-top:20px; font-size:12px; letter-spacing:.12em } .identity-link span { font-size:23px; transition:transform .2s } .identity-link:hover span { transform:translate(3px,-3px) } .identity-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:58px; border-top:1px solid #c7cbc3 } .identity-principles article { padding:30px 32px 34px 0 } .identity-principles article+article { border-left:1px solid #c7cbc3; padding-left:32px } .identity-number { font-size:12px; color:#686f69; letter-spacing:.12em } .identity-principles h3 { font-size:22px; font-weight:500; line-height:1.3; letter-spacing:-.03em; margin:15px 0 12px } .identity-principles p { font-size:15px; line-height:1.7; margin:0; color:#535b57; max-width:310px } .identity a:focus-visible { outline:2px solid #17201e; outline-offset:6px } @media(max-width:900px) { .identity { padding-top:48px } .identity-main { gap:6% } .identity-portrait { min-height:460px } .identity-story h2 { font-size:58px } .identity-lead { font-size:18px } .identity-description { font-size:15px } .identity-principles article { padding-right:20px } .identity-principles article+article { padding-left:20px } .identity-principles h3 { font-size:20px } } @media(max-width:620px) { .identity { padding:40px 6% 0 } .identity-main { grid-template-columns:minmax(0,1fr); gap:32px } .identity-portrait { min-height:360px; max-height:440px; aspect-ratio:1.1 } .identity-story { padding:0 } .identity-story h2 { font-size:clamp(54px,14vw,76px) } .identity-description { font-size:16px } .identity-principles { grid-template-columns:1fr; margin-top:36px } .identity-principles article,.identity-principles article+article { padding:24px 0; border-left:0 } .identity-principles article+article { border-top:1px solid #c7cbc3 } .identity-principles p { max-width:none; font-size:16px } } @media(prefers-reduced-motion:reduce) { .identity-link span { transition:none } } .selected-work { background:#101c19; color:#f7f5f0; padding:72px 5.5% 0 } .selected-work-heading { display:grid; grid-template-columns:1.25fr 1fr; gap:10%; align-items:end; margin-bottom:48px } .work-eyebrow { display:flex; align-items:center; gap:18px; font-size:12px; letter-spacing:.16em; margin:0 0 27px; color:#c3cdc6 } .work-eyebrow:after { content:''; width:42px; border-top:1px solid #84968c } .selected-work-heading h2 { font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-size:clamp(48px,5.2vw,74px); font-weight:800; letter-spacing:-.02em; line-height:1.07; margin:0 } .work-intro { font-size:18px; line-height:1.7; color:#c3cdc6; margin:0 0 5px; max-width:400px } .selected-work-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px } .work-entry { min-width:0 } .work-image { aspect-ratio:1.65; overflow:hidden; background:#24332d } .work-image img { display:block; width:100%; height:100%; object-fit:cover } .work-meta { display:flex; justify-content:space-between; gap:12px; margin:22px 0 15px; font-size:10px; letter-spacing:.1em; line-height:1.5; color:#b7c5bc } .work-entry h3 { font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-size:40px; font-weight:800; line-height:1.12; letter-spacing:-.015em; margin:0 0 12px } .work-purpose { font-size:19px; line-height:1.5; margin:0 0 12px } .work-description { font-size:15px; line-height:1.75; color:#bcc9c0; max-width:470px; margin:0 } .work-tags { list-style:none; display:flex; flex-wrap:wrap; gap:12px 22px; border-top:1px solid #3a4c42; margin:25px 0 0; padding:17px 0 0; font-size:10px; line-height:1.5; letter-spacing:.12em; color:#b7c5bc } .work-footer { border-top:1px solid #3a4c42; margin-top:45px; padding:25px 0 29px; display:flex; align-items:center; justify-content:space-between; gap:20px } .work-footer p { font-size:14px; color:#b7c5bc; margin:0 } .work-footer a { display:inline-flex; align-items:center; gap:30px; font-size:11px; letter-spacing:.12em; padding:10px 0 } .work-footer a span { font-size:23px; transition:transform .2s } .work-footer a:hover span { transform:translate(3px,-3px) } .selected-work a:focus-visible { outline:2px solid currentColor; outline-offset:6px } @media(max-width:900px) { .selected-work { padding-top:48px } .selected-work-heading { gap:7% } .work-intro { font-size:16px } .selected-work-list { gap:26px } .work-meta { flex-wrap:wrap; gap:5px 12px } .work-entry h3 { font-size:34px } .work-purpose { font-size:17px } } @media(max-width:620px) { .selected-work { padding:40px 6% 0 } .selected-work-heading { grid-template-columns:1fr; gap:24px; margin-bottom:32px } .selected-work-heading h2 { font-size:clamp(46px,12vw,68px) } .work-intro { max-width:none } .selected-work-list { grid-template-columns:1fr; gap:40px } .work-image { aspect-ratio:1.4 } .work-image img { object-position:35% center } .work-description { font-size:16px } .work-meta { justify-content:space-between } .work-footer { align-items:flex-start; flex-direction:column; gap:12px; margin-top:32px } .work-footer a { font-size:10px; gap:20px } } @media(prefers-reduced-motion:reduce) { .work-footer a span { transition:none } } .north { background:#f3f1eb; color:#17201e } .north-heading { padding:30px 5.5%; display:flex; justify-content:space-between; align-items:center; gap:20px } .north-heading p { margin:0; font-size:12px; letter-spacing:.16em } .north-heading>span { font-size:10px; letter-spacing:.14em; color:#535b57 } .north-scene { position:relative; isolation:isolate; min-height:550px; aspect-ratio:2.1; overflow:hidden } .north-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-1 } .north-copy { padding:7% 5.5%; max-width:58% } .north-copy h2 { font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-size:clamp(48px,5.7vw,82px); font-weight:800; line-height:1.08; letter-spacing:-.025em; margin:0 0 24px } .north-copy p { font-size:18px; line-height:1.6; margin:0 } .north-photo-note { position:absolute; bottom:28px; right:5.5%; font-size:10px; letter-spacing:.16em; color:#fff } .north-afterword { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding:45px 5.5% 55px } .north-statement { font-size:clamp(28px,3vw,40px); font-weight:500; line-height:1.22; letter-spacing:-.035em; margin:0 } .north-description p { font-size:16px; line-height:1.75; color:#535b57; margin:0 0 12px; max-width:470px } .north-description a { display:inline-flex; align-items:center; gap:32px; border-bottom:1px solid #9ca19a; padding:10px 0; margin-top:8px; font-size:12px; letter-spacing:.12em } .north-description a span { font-size:23px; transition:transform .2s } .north-description a:hover span { transform:translate(3px,-3px) } .north a:focus-visible { outline:2px solid currentColor; outline-offset:6px } @media(max-width:900px) { .north-scene { min-height:470px } .north-copy { max-width:66%; padding-top:50px } .north-copy h2 { font-size:56px } .north-copy p { font-size:16px } .north-afterword { gap:7% } } @media(max-width:620px) { .north-heading { padding:24px 6%; align-items:flex-start; flex-direction:column; gap:10px } .north-heading>span { font-size:9px } .north-scene { display:flex; flex-direction:column; min-height:0; aspect-ratio:auto; background:#e5e6e2; overflow:visible } .north-copy { order:0; max-width:none; padding:32px 6% } .north-copy h2 { font-size:clamp(46px,11.8vw,68px); margin-bottom:20px } .north-copy p { font-size:16px } .north-photo { order:1; position:static; height:320px; width:100%; object-fit:cover; object-position:76% center; z-index:auto } .north-photo-note { bottom:20px; right:6%; font-size:8px; letter-spacing:.13em } .north-afterword { grid-template-columns:1fr; gap:24px; padding:32px 6% 40px } .north-statement { font-size:32px } .north-description a { font-size:11px } } @media(prefers-reduced-motion:reduce) { .north-description a span { transition:none } } .journal { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:7%; padding:66px 5.5% 72px; background:#f3f1eb; color:#17201e; border-top:1px solid #c7cbc3 } .journal-eyebrow { display:flex; align-items:center; gap:18px; font-size:12px; letter-spacing:.16em; margin:0 0 28px } .journal-eyebrow:after { content:''; width:36px; border-top:1px solid #737972 } .journal-heading h2 { font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:800; font-size:clamp(38px,3.7vw,54px); line-height:1.12; letter-spacing:-.025em; margin:0 0 22px } @media(max-width:1000px) { .journal { gap:5%; grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) } .journal-heading h2 { font-size:39px } } @media(max-width:760px) { .journal { grid-template-columns:1fr; gap:32px; padding:40px 6% } .journal-heading h2 { font-size:clamp(42px,8vw,60px) } } .get-in-touch { background:#101c19; color:#f7f5f0; padding:70px 5.5% 0 } .contact-eyebrow { font-size:12px; letter-spacing:.16em; color:#b7c5bc; margin:0 0 30px; display:flex; align-items:center; gap:18px } .contact-eyebrow:after { content:''; width:42px; border-top:1px solid #84968c } .contact-layout { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:7%; align-items:end } .contact-layout h2 { font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:800; font-size:clamp(42px,4.5vw,66px); line-height:1.13; letter-spacing:-.025em; margin:0 } .contact-invitation { font-size:17px; line-height:1.7; color:#c3cdc6; margin:0 0 4px } .contact-address { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:830px; width:100%; border-bottom:1px solid #64766b; padding:24px 0; margin-top:28px; font-size:clamp(26px,3.3vw,48px); font-weight:400; letter-spacing:-.035em; line-height:1.3 } .contact-address>span:first-child { min-width:0; overflow-wrap:anywhere } .contact-address>span:last-child { flex-shrink:0; font-size:1.1em; transition:transform .2s } .contact-address:hover>span:last-child { transform:translate(5px,-5px) } .contact-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0 26px } .contact-networks { display:flex; flex-wrap:wrap; gap:18px 35px } .contact-networks a { display:inline-flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.12em; padding:12px 0 } .contact-networks a:hover { text-decoration:none } .contact-networks a:hover .social-label { text-decoration:underline; text-underline-offset:6px } .contact-networks a .social-label { font-size:inherit } .contact-networks a span { font-size:17px } .site-colophon { background:#101c19; color:#b7c5bc; padding:28px 5.5%; display:grid; grid-template-columns:1fr 1fr 1fr; gap:25px; align-items:center; border-top:1px solid #3a4c42 } .colophon-brand { display:inline-flex; align-items:center; gap:18px; width:fit-content; color:#f7f5f0; font-size:12px; letter-spacing:.14em } .colophon-brand img { width:29px; height:31px; display:block } .colophon-brand small { display:block; font-size:9px; letter-spacing:.12em; color:#b7c5bc; margin-top:5px } .colophon-motto { margin:0; text-align:center; font-size:10px; letter-spacing:.13em; line-height:1.6 } .colophon-copyright { font-size:11px; line-height:1.7; text-align:right; margin:0 } .get-in-touch a:focus-visible,.site-colophon a:focus-visible { outline:2px solid currentColor; outline-offset:6px } @media(max-width:900px) { .get-in-touch { padding-top:48px } .contact-layout { grid-template-columns:1fr; gap:25px } .contact-layout h2 { font-size:clamp(42px,6.5vw,60px) } .contact-address { font-size:38px } .site-colophon { grid-template-columns:1fr 1fr } .colophon-motto { grid-column:1/-1; grid-row:2; text-align:left } } @media(max-width:560px) { .get-in-touch { padding:40px 6% 0 } .contact-layout h2 { font-size:clamp(32px,8.3vw,46px) } .contact-invitation { font-size:16px } .contact-address { font-size:clamp(24px,6.1vw,34px); padding:20px 0; margin-top:20px; gap:14px } .contact-bottom { gap:16px; flex-wrap:wrap; padding-bottom:24px } .contact-networks { gap:26px } .site-colophon { padding:25px 6%; gap:23px 15px } .colophon-brand { font-size:10px; gap:12px } .colophon-copyright { font-size:10px } .colophon-motto { font-size:9px } } @media(prefers-reduced-motion:reduce) { .contact-address>span:last-child { transition:none } } .site > header.is-scrolled { position:fixed; top:0; left:50%; right:auto; width:100%; max-width:1440px; margin-left:0; transform:translateX(-50%); } .site > header.is-scrolled { height:68px; background:rgba(13,23,19,.94); box-shadow:none; transition:transform .24s ease,background-color .2s ease } .site > header.is-scrolled .nav { height:68px } .site > header.is-scrolled.is-hidden { transform:translate(-50%,-110%) } .skip-content { position:fixed; left:16px; top:12px; z-index:200; padding:14px 18px; background:#f3f1eb; color:#17201e; transform:translateY(-180%) } .skip-content:focus { transform:none } a:focus-visible,button:focus-visible { outline:2px solid currentColor; outline-offset:5px } .menu { max-height:calc(100dvh - 84px); overflow-y:auto } .menu nav a,.menu-socials a { min-height:44px; display:flex; align-items:center } .site > header .burger { min-width:44px!important; min-height:44px!important; display:flex; align-items:center; justify-content:center } .offline-line { border-top:1px solid #c7cbc3; padding:25px 0; margin:0; font-size:11px; line-height:1.8; letter-spacing:.14em; color:#535b57; word-spacing:.3em } .offline-line span { margin:0 12px } .identity-number,.work-eyebrow,.north-heading p,.journal-eyebrow,.contact-eyebrow { font-size:12px; letter-spacing:.14em } .work-entry { transition:background-color .2s ease } .work-image img { transition:transform .35s ease } @media(hover:hover) { .work-entry:hover .work-image img { transform:scale(1.018) } } .work-action { margin-top:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px } .work-action button { padding:10px 0; border:0; background:none; color:#c3cdc6; font:inherit; font-size:11px; letter-spacing:.1em; min-height:44px; text-align:left } .work-action button span { margin-left:15px } .work-action small { font-size:12px; color:#a7b6ab } .work-action button:disabled { cursor:default; opacity:.72 } .travel-metadata { display:flex; gap:30px; font-size:11px; letter-spacing:.12em; line-height:1.7 } .travel-metadata dt { color:#535b57 } .travel-metadata dd { margin:0 } .journal { display:block; padding-top:58px; padding-bottom:58px } .journal-heading h2 { font-size:clamp(34px,4vw,58px); line-height:1.16; margin-bottom:32px } .notes-empty { border-top:1px solid #bfc6bd; border-bottom:1px solid #bfc6bd; padding:28px 0; display:flex; gap:28px; align-items:baseline } .notes-empty-index { color:#687469 } .notes-empty p { margin:0; font-size:16px; line-height:1.8 } .notes-empty p span { color:#535b57; font-size:14px } .editorial-note { display:grid; grid-template-columns:100px 1fr 100px 25px; gap:20px; align-items:center; border-top:1px solid #bfc6bd; padding:23px 0; transition:background-color .2s ease } .editorial-note h3 { font-size:22px; margin:0; line-height:1.35 } .editorial-note time,.note-category { font-size:12px } .editorial-note:hover { background:#e9e9e1 } .contact-networks a,.work-footer a,.north-description a,.identity-link { min-height:44px } @media(max-width:620px) { .work-action { align-items:flex-start; flex-direction:column; gap:0 } .offline-line { font-size:10px; letter-spacing:.08em; word-spacing:.1em } .offline-line span { margin:0 5px } .editorial-note { grid-template-columns:1fr auto; gap:12px } .editorial-note h3 { grid-column:1/-1; grid-row:2 } .editorial-note time { grid-column:1 } .journal { padding:40px 6% } .contact-address { font-size:clamp(22px,6vw,34px) } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important } *,*:before,*:after { animation:none!important; transition:none!important } .reveal { opacity:1; transform:none } } .site .hero-content.reveal { opacity:1; transform:none; animation:none } .contact-networks a > span[aria-hidden="true"] { display:inline-block; transition:transform .2s; } .contact-networks a:hover > span[aria-hidden="true"] { transform:translate(5px,-5px); } @media(prefers-reduced-motion:reduce) { .contact-networks a > span[aria-hidden="true"] { transition:none; } .contact-networks a:hover > span[aria-hidden="true"] { transform:none; } }  .arrow-icon { display:inline-block; width:1em; height:1em; vertical-align:-.125em; }  .work-entry-studio { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:36px; border-top:1px solid #3a4c42; padding-top:36px; } .studio-copy { min-width:0 } .studio-copy .work-meta { margin-top:0 } .studio-role { margin-top:14px; font-size:13px } .studio-visual { position:relative; background:#b8b6aa } .studio-visual .studio-screen { position:absolute; width:88%; height:auto; left:5%; top:9%; object-fit:contain; } .studio-visual .studio-booking { position:absolute; width:28%; height:auto; right:4%; top:18%; object-fit:contain; border:3px solid #26302e; } @media(max-width:900px) { .work-entry-studio { gap:26px; padding-top:26px } } @media(max-width:620px) { .work-entry-studio { grid-template-columns:1fr; gap:22px; padding-top:40px } .studio-copy .work-meta { margin-top:0 } }  .journal-feed { min-width:0 } .journal-results { min-height:480px } #journal-status[hidden] { display:none } .editorial-note { height:160px; min-width:0; grid-template-columns:80px minmax(0,1fr) 90px 25px; gap:14px } .note-category { overflow-wrap:anywhere } .editorial-note h3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere } .journal-all { display:inline-flex; align-items:center; gap:24px; min-height:44px; margin-top:18px; font-size:11px; letter-spacing:.12em; border-bottom:1px solid #bfc6bd } .journal-all span { font-size:23px } .journal-feed a:focus-visible { outline:2px solid currentColor; outline-offset:4px } @media(max-width:620px) { .journal-results { min-height:540px } .editorial-note { height:180px; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; } .editorial-note .note-category { grid-column:2; grid-row:1 } .editorial-note > span:last-child { display:none } }  .identity-principles p { font-size:16px } .work-description { font-size:16px; line-height:1.75 } .studio-role { font-size:14px; line-height:1.7 } .work-action small { font-size:14px; line-height:1.5 } .studio-visual { background:#f3f1eb } .studio-visual .studio-screen { width:100%; height:100%; left:0; top:0; object-fit:cover; object-position:left top; } .studio-visual .studio-booking { width:30%; right:2.5%; top:12%; border:1px solid #bfc6bd; } .editorial-note h3 { font-size:25px; line-height:1.32; transition:transform .2s ease } .editorial-note { transition:border-color .2s ease } .editorial-note:hover { background:transparent } .editorial-note > span:last-child { display:inline-block; transition:transform .2s ease } .work-action button span, .work-action a span { display:inline-block; transition:transform .2s ease } @media(hover:hover) { .editorial-note:hover { border-color:#737972 } .editorial-note:hover h3 { transform:translateX(3px) } .editorial-note:hover > span:last-child { transform:translate(3px,-3px) } .work-entry:has(.work-action a):hover .work-action a span, .work-entry:has(.work-action button:enabled):hover .work-action button span { transform:translate(3px,-3px) } } .work-entry:focus-within .work-image img { transform:scale(1.018) } .editorial-note:focus-visible { outline:2px solid #17201e; outline-offset:4px } @media(max-width:620px) { .editorial-note { grid-template-columns:minmax(0,1fr) auto 20px } .editorial-note h3 { grid-column:1 / -1 } .editorial-note > span:last-child { grid-column:3; grid-row:1 } .studio-visual .studio-booking { width:31%; right:2%; top:10% } } @media(prefers-reduced-motion:reduce) { .work-entry:hover .work-image img, .work-entry:focus-within .work-image img, .editorial-note:hover h3, .editorial-note:hover > span:last-child, .work-entry .work-action a span, .work-entry .work-action button span { transform:none; transition:none } }  .work-action a { display:inline-flex; align-items:center; gap:22px; font-size:11px; letter-spacing:.12em; padding:12px 0; border-bottom:1px solid #647069; } .work-entry-studio a:focus-visible { outline:2px solid currentColor; outline-offset:5px; }  .work-action a.project-detail-link { padding:10px 0; border:0; color:#c3cdc6; font:inherit; font-size:11px; letter-spacing:.1em; min-height:44px; text-align:left; gap:15px } .work-entry a:focus-visible { outline:2px solid currentColor; outline-offset:5px }