* {
  box-sizing: border-box;
}

:root {
 
  /* CORE COLORS */
  --color-black: #101018;
  --color-gray-800: #555562;
  --color-gray-400: #93939a;
  --color-gray-100: #e0e0e1;
  --color-white: #ffffff;

  /* SEMANTIC COLOUR */
  --color-content-default: var(--color-black);
  --color-layout-container: var(--color-gray-100);
  --color-brand-01: #68C6EE;
  --color-brand-02: #7C5FE4;
  --color-brand-03: #C10230;
  --color-brand-04: #0BCDA5;

  /* CORE TYPE */
  --font-main: "Inter";

  /* SEMANTIC TYPE */
  --title-xl-family: var(--font-main);
  --title-xl-size: 48px;
  --title-xl-weight: 700;
  --title-xl-style: normal;
  --title-xl-line-height: 84px;

  --title-s-family: var(--font-main);
  --title-s-size: 32px;
  --title-s-weight: 700;
  --title-s-style: normal;
  --title-s-line-height: 56px;

  --title-xs-family: var(--font-main);
  --title-xs-size: 24px;
  --title-xs-weight: 700;
  --title-xs-style: normal;
  --title-xs-line-height: 30px;

  --paragraph-l-family: var(--font-main);
  --paragraph-l-size: 24px;
  --paragraph-l-weight: 400;
  --paragraph-l-style: normal;
  --paragraph-l-line-height: 42px;

  --paragraph-m-family: var(--font-main);
  --paragraph-m-size: 16px;
  --paragraph-m-weight: 400;
  --paragraph-m-style: normal;
  --paragraph-m-line-height: 28px;

  --paragraph-s-family: var(--font-main);
  --paragraph-s-size: 12px;
  --paragraph-s-weight: 400;
  --paragraph-s-style: normal;
  --paragraph-s-line-height: 21px;

  --paragraph-s-tabular-family: var(--font-main);
  --paragraph-s-tabular-size: 12px;
  --paragraph-s-tabular-weight: 400;
  --paragraph-s-tabular-style: normal;
  --paragraph-s-tabular-line-height: 21px;
  
  --action-m-family: var(--font-main);
  --action-m-size: 16px;
  --action-m-weight: 400;
  --action-m-style: normal;
  --action-m-letter-spacing: 3.2px;
  --action-m-line-height: 20px;
  
  --overline-m-family: var(--font-main);
  --overline-m-size: 16px;
  --overline-m-weight: 400;
  --overline-m-style: normal;
  --overline-m-letter-spacing: 3.2px;
  --overline-m-line-height: 20px;
  --overline-m-case: uppercase;

  /* OTHER VARIABLES */
  --nav-height: calc((100vw - 80px) / 8);
  --nav-height-scrolled: 80px;
}

/* FONT STYLES */

.title-xl {
  font-family: var(--title-xl-family);
  font-size: var(--title-xl-size);
  font-weight: var(--title-xl-weight);
  font-style: var(--title-xl-style);
  line-height: var(--title-xl-line-height);
}

.title-s {
  font-family: var(--title-s-family);
  font-size: var(--title-s-size);
  font-weight: var(--title-s-weight);
  font-style: var(--title-s-style);
  line-height: var(--title-s-line-height);
}

.title-xs {
  font-family: var(--title-xs-family);
  font-size: var(--title-xs-size);
  font-weight: var(--title-xs-weight);
  font-style: var(--title-xs-style);
  line-height: var(--title-xs-line-height);
}

.paragraph-l {
  font-family: var(--paragraph-l-family);
  font-size: var(--paragraph-l-size);
  font-weight: var(--paragraph-l-weight);
  font-style: var(--paragraph-l-style);
  line-height: var(--paragraph-l-line-height);
}

.paragraph-m {
  font-family: var(--paragraph-m-family);
  font-size: var(--paragraph-m-size);
  font-weight: var(--paragraph-m-weight);
  font-style: var(--paragraph-m-style);
  line-height: var(--paragraph-m-line-height);
}

.paragraph-s {
  font-family: var(--paragraph-s-family);
  font-size: var(--paragraph-s-size);
  font-weight: var(--paragraph-s-weight);
  font-style: var(--paragraph-s-style);
  line-height: var(--paragraph-s-line-height);
}

.paragraph-s-tabular {
  font-family: var(--paragraph-s-tabular-family);
  font-size: var(--paragraph-s-tabular-size);
  font-weight: var(--paragraph-s-tabular-weight);
  font-style: var(--paragraph-s-tabular-style);
  line-height: var(--paragraph-s-tabular-line-height);
}

.action-m {
  font-family: var(--action-m-family);
  font-size: var(--action-m-size);
  font-weight: var(--action-m-weight);
  font-style: var(--action-m-style);
  letter-spacing: var(--action-m-letter-spacing);
  line-height: var(--action-m-line-height);
}

.overline-m {
  font-family: var(--overline-m-family);
  font-size: var(--overline-m-size);
  font-weight: var(--overline-m-weight);
  font-style: var(--overline-m-style);
  letter-spacing: var(--overline-m-letter-spacing);
  line-height: var(--overline-m-line-height);
  text-transform: var(--overline-m-case);
}

/* GLOBAL STYLES */

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--color-content-default);
  background-color: var(--color-layout-container);
  display: flex;
  flex-direction: column;
  align-items: left;
  overflow-x: hidden;
}

main {
  width: calc(100% - 80px);
  margin: 0 auto;
  padding: 0;
}

.link-large {
  color: var(--color-black);
  text-decoration: none;
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--color-black), var(--color-black));
  background-size: 100% 4px;
  background-repeat: repeat-x;
  background-position: 0 calc(100% - 0px);
  padding-bottom: 8px;
  transition: background-size 0.2s ease-out;
  line-height: 1.6;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  white-space: normal;
  width: auto;
}

.link-large:hover {
  background-size: 100% 8px;
}

.external-link-wrapper {
  display: block;
  justify-content: flex-start;
  width: fit-content;
}

.external-link {
  font-size: 16px;
  color: var(--color-black);
  text-decoration: none;
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--color-black), var(--color-black));
  background-size: 100% 1px;
  background-repeat: repeat-x;
  background-position: 0 calc(100% - 0px);
  padding-bottom: 4px;
  transition: background-size 0.2s ease-out;
  line-height: 1.6;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  white-space: normal;
  width: auto;
}

.external-link:hover {
  background-size: 100% 4px;
}

.external-link svg {
  color: var(--color-black);
  margin-left: 4px;
  vertical-align: middle;
}

.subtitle {
  color: var(--color-black);
  margin-bottom: 1.5rem;
  font-weight: 400;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.decorative-line {
  width: 24px;
  height: 1px;
  background-color: var(--color-black);
  display: inline-block;
}

/* ---------- COSMETIC GRID BACKGROUND ---------- */

.grid-background {
  position: fixed;
  top: 0;
  left: 40px;
  right: 40px;
  width: calc(100% - 80px);
  height: 100vh;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  animation: gridMotion 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gridMotion {
  from {
    transform: translateY(-100vh);
  }
  to {
    transform: translateY(0);
  }
}

.grid-background::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-white);
}

.grid-background::after {
  content: '';
  position: absolute;
  right: 0px;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-white);
}

.grid-column {
  border-right: 1px solid var(--color-white);
}

/* ---------- NAV SECTION ---------- */

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  gap: 0;
  background-color: var(--color-gray-100);
  position: fixed;
  top: 0;
  left: 40px;
  z-index: 100;
  border-left: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
  width: calc(50% - 40px);
  transition: height 0.3s ease-in-out;
  height: var(--nav-height);
}

nav .logo {
  border-right: 1px solid var(--color-black);
}

.logo {
  width: calc(100% / 4);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  padding: 40px;
  position: relative;
  transition: padding 0.3s ease-in-out;
  text-decoration: none;
}


.logo svg {
  width: calc((100vw - 80px) / 16);
  height: calc((100vw - 80px) / 16);
  position: absolute;
  opacity: 1;
  transform: rotate(0deg);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  animation: logoInitialRotation 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

nav .logo:hover svg {
  animation: circularTextRotation 15s linear infinite;
}

@keyframes logoInitialRotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

.logo-text {
  position: absolute;
  bottom: 16px;
  right: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease-in-out 0.15s, transform 0.3s ease-in-out 0.15s;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

@media (max-width: 768px) {
  .logo-text{
    bottom: 8px;
    right: 8px;
  }
}

@media (min-width: 521px) {

nav.scrolled {
  height: var(--nav-height-scrolled);
}

nav.scrolled .logo {
  padding: 8px;
  height: auto;
}

.scrolled .logo svg {
  opacity: 0;
  transform: translate(0px, -24px);
}

.scrolled .logo-text {
  opacity: 1;
  transform: translateY(0);
}
}

nav a {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  height: 100%;
  width: calc(100% / 4);
  padding: 0 0px 16px 16px;
  border-radius: 0;
  border: none;
  position: relative;
  text-align: right;
  text-decoration: none;
  color: var(--color-black);
  background-color: transparent;
  transition: all 0.2s ease-in-out, padding 0.3s ease-in-out;
}

.nav-number {
  font-size: 16px;
  display: block;
  text-align: right;
  transition: font-size 0.3s ease-in-out;
}

.nav-text {
  font-size: 24px;
  font-weight: 600;
  display: block;
  text-align: right;
  transition: font-size 0.3s ease-in-out;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--color-black);
  transition: width 0.25s ease-out;
}

nav a:hover::after {
  width: 100%;
}

nav a[aria-current='page']::after {
  width: 100%;
}

nav a[aria-current='page'] {
  color: var(--color-black);
  background-color: transparent;
}

/* ---------- HERO SECTION ---------- */

.title-section {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  min-height: 100vh;
  position: relative;
  padding-top: 0;
}

.title-content {
  grid-column: 2 / span 4;
  align-self: center;
}

.title-content h1 {
  padding-right: 40px;
}

.title-right {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
  align-self: start;
  margin-right: -40px;
}

.title-right .title-image {
  height: calc(50vh + 80px);
  background-image: url('assets/images/portrait_compressed.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.title-right .title-image::after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0;
  width: 40px;
  height: calc(100% - 40px);
  background-color: var(--color-black);
  transform: translateY(-100%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  z-index: 1;
}

.title-right .title-image.animate::after {
  transform: translateY(0);
}

.title-links {
  position: absolute;
  bottom: 40px;
  right: 0px;
  width: calc((100% / 8) * 3);
}

.title-links .external-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.title-links .external-link-wrapper {
  grid-column: span 1;
}

.scroll-down {
  position: fixed;
  bottom: 36px;
  left: 40px;
  padding: 4px 4px 4px 16px;
  text-decoration: none;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  z-index: 100;
}

.scroll-down .bounce-arrow{
  position: absolute;
  left: -7.5px;
  top: 6px;
}

.scroll-down::before {
  content: '';
  width: 1px;
  height: 52px;
  background-color: var(--color-black);
  transform-origin: top;
  animation: scrollLineGrow 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: absolute;
  bottom: 9px;
  left: 0px;
  transition: transform 0.3s ease-out, height 0.3s ease-out, bottom 0.3s ease-out;
  transform: translateY(-40px);
}

.scroll-down:hover::before {
  height: 68px;
  bottom: -7px;
}

.scroll-down.back-to-top::before {
  transform-origin: bottom;
  bottom: -33px;
  transform: rotate(180deg);
}

.scroll-down.back-to-top:hover::before {
  height: 68px;
}

.scroll-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

@keyframes scrollLineGrow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.scroll-down.hidden {
  opacity: 0;
  visibility: hidden;
}

.scroll-down.back-to-top svg {
  transform: rotate(180deg);
}

.scroll-down svg {
  color: var(--color-black);
  transition: transform 0.3s ease-out;
}

.scroll-down:hover svg {
  transform: translateY(16px);
}

.scroll-down.back-to-top:hover svg {
  transform: rotate(180deg) translateY(16px);
}

.scroll-down.back-to-top:hover::before {
  transform: rotate(180deg) translateY(16px);
}

.case-studies {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: calc((100vw - 80px) / 8) 0;
  padding: 80px 0;
  position: relative;
}

.case-study {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  position: relative;
  /* overflow: hidden; */
}

.case-study.visible::after {
  transform: translateX(0);
}

.case-study-background {
  grid-column: 3 / span 6;
  background-color: var(--color-gray-100);
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  border-top: 1px solid var(--color-white);
  border-bottom: 1px solid var(--color-white);
}

.case-study-content {
  grid-column: 2 / span 3;
  z-index: 1;
  align-self: center;
  padding: 24px 0;
}

.case-study-meta {
  margin-bottom: 16px;
}

.case-study h2 {
  margin: 0 0 32px 0;
}

.case-study-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.tag-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-study-image {
  grid-column: 5 / -1;
  z-index: 1;
  position: relative;
  overflow: hidden;
  padding: 40px 0;
  margin-right: -40px;
}

.case-study-image::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 0;
  width: calc(50% + 20px);
  height: calc(100% - 2px);
  background-color: var(--color-gray-400);
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  z-index: -1;
}

.home-case-study-01 .case-study-image::after{
  background-color: var(--color-brand-01);
}

.home-case-study-02 .case-study-image::after{
  background-color: var(--color-brand-02);
}

.home-case-study-03 .case-study-image::after{
  background-color: var(--color-brand-03);
}

.case-study.visible .case-study-image::after {
  transform: translateX(0);
}

.case-study-image img {
  width: calc(100% + 40px);
  height: auto;
  display: block;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.table-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  position: relative;
  padding: 80px 0px;
}

.table-group h2 {
  grid-column: 2 / span 6;
  align-self: center;
  margin: 0 0 32px 0;
}

.row {
  background-color: var(--color-gray-100);
  border-bottom: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  padding: 24px 0px;
  display: grid;
  grid-column: 2 / span 6;
  grid-template-columns: repeat(6, 1fr);
  align-items: baseline;
}

.row:first-of-type {
  border-top: 1px solid var(--color-white);  
}

.row-title {
  grid-column: 1 / span 2;
  flex-direction: column;
}

.row-year {
  grid-column: 3 / span 1;
  flex-direction: column;
}

.row-link {
  grid-column: 4 / span 3;
  flex-direction: column;
}


/* ---------- CASE STUDY PAGE SECTION ---------- */

/* case-study-page {

} */

.case-study-page .case-study-tags {
    grid-template-columns: repeat(4, 1fr);
}


.case-study-page .title-right {
    grid-column: 6 / -1;
}

/* ---------- JOURNAL SECTION ---------- */


.page-intro {
  padding-top: calc((((100vw - 80px) / 8) * 2) - 64px); /* One grid column height of padding */
  margin-bottom: calc(((100vw - 80px) / 8) - 32px); /* One grid column height of padding */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.page-intro h1{
  grid-column: 2 / span 5;
  align-self: center;
  margin-bottom: 0px;
}

.page-intro p{
  grid-column: 2 / span 5;
  align-self: center;
}

.masonry-grid {
  padding-left: var(--nav-height);
  columns: 2;
  column-gap: 0;
  width: 100%;
  column-gap: calc((100vw - 80px) / 8); /* One column width of cosmetic grid */
  margin-bottom: calc(((100vw - 80px) / 8) - 40px); 
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: calc(((100vw - 80px) / 8) - 24px);
  display: block;
  position: relative;
  width: 100%;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

.masonry-data {
  display: flex;
  gap: 0;
  align-items: start;
  padding-top: 12px;;
}

.masonry-description {
  width: calc(((100vw - 80px) / 8) * 2); /* Width of two grid columns */
  flex-shrink: 0; /* Prevent description from shrinking */
}

.masonry-date {
  width: calc((100vw - 80px) / 8);
  flex-shrink: 0;
  text-align: right
}

@media (max-width: 768px) {
  .masonry-data {
    flex-direction: column;
    gap: 0px;
  }

  .masonry-date,
  .masonry-description {
    width: 100%;
  }

  .masonry-date{
    width: 100%;
    text-align: left;
    margin-top: 0px;
  }

}


/* Grid spans */
/* .span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-6 {
  grid-column: span 6;
}

.span-8 {
  grid-column: span 8;
} */

@media (max-width: 768px) {
  .masonry-grid {
    columns: 1;
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-intro {
    padding-top: calc((((100vw - 80px) / 4) * 2) - 64px); /* One grid column height of padding */
    margin-bottom: calc(((100vw - 80px) / 4) - 24px); /* One grid column height of padding */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-intro h1{
    grid-column: 1 / span 4;
  }

  .page-intro p{
    grid-column: 1 / span 4;
  }
  /* .span-2, .span-4 {
    grid-column: span 4; 
  }

  .span-6, .span-8 {
    grid-column: span 4;
  } */
}

/* ---------- FOOTER SECTION ---------- */

.site-footer {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  padding: 40px 0;
  align-items: center;
}

.soon {
  height: 100vh;
}

.footer-left {
  grid-column: 2 / span 4;
  display: flex;
  flex-direction: column;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer-links a {
  width: fit-content;
  line-height: inherit;
  display: inline;
}

.footer-right {
  grid-column: 7 / span 2;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-gray-100);
  border-top: 1px solid var(--color-white);
  border-bottom: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  position: relative;
  overflow: hidden;
}

.footer-right::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  z-index: 0;
}

.footer-right .logo {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0px;
  aspect-ratio: 1;
}

.footer-right .logo svg {
  width: calc((100vw - 32px) / 8);
  height: calc((100vw - 32px) / 8);
}

.footer-right .logo-footer {
  animation: circularLogoRotation 30s linear infinite;
}

.site-footer .external-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px;
  height: fit-content;
}

.site-footer .external-link-wrapper {
  grid-column: span 1;
  display: flex;
  justify-content: flex-start;
}

.site-footer .copyright {
  margin-top: 32px;
}

.circular-text {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: circularTextRotation 15s linear infinite;
  transform-origin: center;
  will-change: transform;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circular-text-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.circular-text-svg text {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  fill: var(--color-black);
}

@keyframes circularTextRotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes circularLogoRotation {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}


/* MEDIA QUERIES */

/* Checks if user has enabled "Reduce Motion" setting to improve accessibility */

@media (prefers-reduced-motion: reduce) {
  .scroll-down.back-to-top:hover::before {
    height: 52px;
  }
  .logo:hover svg {
    animation: none;
  }
  .circular-text {
    animation: none;
  }
  .scroll-down:hover svg {
    transform: none;
  }
}

/* For 27inches+ desktop monitors */

@media (min-width: 1920px) {
  .footer-right {
    grid-column: 7 / span 1;
    border-right: 1px solid var(--color-white);
    }
  
  .footer-right .logo {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0px;
    aspect-ratio: 1;
  }
  
  .footer-right .logo svg {
    width: calc((100vw - 32px) / 16);
    height: calc((100vw - 32px) / 16);
  }
}

/* For landscape tablets */

@media (max-width: 1280px) {
  .nav-number {
    font-size: 12px;
    display: block;
    text-align: right;
  }

  .nav-text {
    font-size: 16px;
  }
}

/* For portrait tablets and mobile */

@media (max-width: 768px) {
  :root {
    --nav-height: calc((100vw - 32px) / 4);
  }

  .title-xl {
    font-family: var(--title-s-family);
    font-size: var(--title-s-size);
    font-weight: var(--title-s-weight);
    font-style: var(--title-s-style);
    line-height: var(--title-s-line-height);
  }
  
  .title-s {
    font-family: var(--title-xs-family);
    font-size: var(--title-xs-size);
    font-weight: var(--title-xs-weight);
    font-style: var(--title-xs-style);
    line-height: var(--title-xs-line-height);
  }

  .grid-background {
    left: 16px;
    right: 16px;
    width: calc(100% - 32px);
    grid-template-columns: repeat(4, 1fr);
  }

  .mobile-hide {
    display: none;
  }

  nav {
    width: calc(100% - 32px);
    left: 16px;
  }

  nav a {
    width: calc(100% / 4);
  }

  main {
    width: 100%;
  }

  nav .logo {
    width: calc(100% / 4);
    padding: 16px;
  }

  nav .logo svg {
    width: calc((100vw - 32px) / 8);
    height: calc((100vw - 32px) / 8);
  }

  nav a {
    padding: 0 8px 8px 8px;
  }

  .nav-number {
    font-size: 12px;
    display: block;
    text-align: right;
  }

  .nav-text {
    font-size: 16px;
  }

  .title-section {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: calc(((100vw - 32px) / 4));
  }

  .title-content {
    order: 1;
    padding-right: 0;
    margin-top:  calc(((100vw - 32px) / 8));
    margin-bottom:  calc(((100vw - 32px) / 8));
  }

  .title-right {
    order: 0;
    margin-right: 0;
    width: calc(50% + 16px);
    margin-right: -16px;
    margin-left: auto;
  }
  
  .title-right .title-image {
    height: calc(((100vw - 32px) / 4) * 2);;
  }

  .title-right .title-image::after {
    /* width: 16px;
    height: calc(100% - 16px);
    top: 0px; */
    Display: none
  }

  .title-links {
    position: static;
    width: 100%;
    margin-top: 40px;
    order: 3
  }
  
  .title-links .external-links {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }

  .social-links {
    order: 2;
    justify-content: center;
    margin-top: 24px;
  }

  .scroll-down {
    left: 16px;
  }

  .scroll-down span {
    display: none;
  }

  .case-study {
    grid-template-columns: 1fr;
  }

  .case-study-background {
    grid-column: 1 / -1;
    background-color: transparent;
    border-top: none;
    border-bottom: none;
  }

  .case-study-content {
    grid-column: 1 / -1;
    padding: 40px 16px;
  }

  .case-study-tags {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-study-image {
    grid-column: 1 / -1;
    margin: 0;
    padding: 40px 0px 40px 16px;
  }

  .case-study-image img {
    width: 100%;
  }

  .case-study-image::after {
    width: 50%;
  }

  .table-group {
    grid-column: 1 / -1;
    padding: 40px 16px;
  }

  .table-group h2 {
    grid-column: 1 / -1;
    margin: 0 0 32px 0;
  }

  .table-group .row {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    padding: 24px 0px;
    border-left: 1px solid var(--color-white);
  }

  .row-title {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .row-year {
    grid-column: 3 / -1;
    grid-row: 1;
    text-align: right;
  }

  .row-link {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  
  .site-footer {
    padding: 16px;
  }

  .footer-left {
    grid-column: 1 / span 8;
    display: flex;
    flex-direction: column;
  }

  .site-footer .external-link-wrapper {
    grid-column: span 2;
  }

  .footer-right {
    grid-column: 5 / -1;
    margin-top: 40px;
  }

  .footer-right .logo svg {
    width: calc((100vw - 32px) / 4);
    height: calc((100vw - 32px) / 4);
  }
}

@media (max-width: 520px) {
    .title-section .title-xl {
      font-family: var(--title-xs-family);
      font-size: var(--title-xs-size);
      font-weight: var(--title-xs-weight);
      font-style: var(--title-xs-style);
      line-height: var(--title-xs-line-height);   
    }
}