/* GLOBAL */
* {
  padding: 0;
  margin: 0;
}

::selection {
  background: var(--dark);
  color: var(--lightgrey);
}
::-moz-selection{
  background: var(--dark);
  color: var(--white);
}

h2::selection {
  background: var(--dark);
  color: var(--white);
}
h2::-moz-selection {
  background: var(--dark);
  color: var(--white);
}

body {

  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  scroll-behavior: smooth;
  font-weight: normal;
  font-style: normal;
  font-kerning: normal;
  padding: 1rem;





}

:root {
  --black: #000;
  --white: #fff;
  /* --dark: #171717; */
   --dark: #353535;
  --basegrey: #888888;
  --lightgrey: #CCCCCC;
  --borderlight: #E9E9E9;
  --borderdark: #2B2B2B;
  --profileyellow: #ffa539;


}

/* !TYPE */
@font-face {
  font-family: "300";
  src: url("../fonts/a7f3d9e2.woff2?v=202510201825") format('woff2');
}
@font-face {
  font-family: "600";
  src: url("../fonts/b8e4c1f5.woff2?v=202510201825") format('woff2');
}

a,
li,
figure,
p,
h1,
h2 {
  font-family: "300";
  color: var(--basegrey);
  text-decoration: none;
  letter-spacing: -0.29px;
}

/* Size 1 */
h1,
h2,
li.menu-item,
p,
ul li {
  font-size: 20px;
  line-height: 29px;
}
p {
  max-width: 48ch;
}
h1, h2 {
  font-weight: 300;
}

/* text column lists */
.article-list {
  list-style: disc;
  padding-left: 1rem;
  margin: -.4rem 0 .6rem 0;
}

/* Size 2 */
figure,
.sub-menu-item {
  font-size: 16px;
  line-height: 23px;
}

/* links */
a.article-link { color: var(--black); }

/* figure captions */
figcaption {
  font-size: .83rem;
  line-height: 1rem;
  letter-spacing: 0;
  color: #000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .3rem;
  padding-bottom: .5rem;
}

/* Article styles */
ol li,
li figure { display: inline; }
li figure { padding: 0 .5rem; }

section { margin: 0; }
section h2 {
  color: var(--lightgrey);
  margin-top: 1.4rem;
}
section:first-of-type { margin-top: 3rem; }
section p { padding-bottom: .5rem; }

.divider-padding { padding-left: .6rem; }

.sub-column figure {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  pointer-events: none;
}
.sub-column figure.fade-in {
  opacity: 1;
  pointer-events: auto;
}

.sub-column figcaption {
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 13 6 6;
  -webkit-hyphenate-limit-before: 6;
  -webkit-hyphenate-limit-after: 6;
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
}

.sub-column figcaption .caption-author {
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 13 6 6;
  -webkit-hyphenate-limit-before: 6;
  -webkit-hyphenate-limit-after: 6;
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
}

.small-spacer { margin-top: 2rem; }

/* Remove padding for inline article figure */


@media screen and (max-width: 1100px){
section h2.variable-heading {

  margin-top: 0;
}
}



/* Profile styles */





/* !STRUCTURE */
.container-grid {
  display: block; /* default: normal DOM flow */
  width: 100%;
  margin: auto;
  max-width: 1728px;
  height: auto;
}
.container-grid > * {
  grid-row: 1/1;
}

/* NAV */
.main-menu li { list-style: none; }
ul li.menu-item { line-height: 27px; }
.sub-menu-item { padding-left: 3.5rem; }
.sub-menu-item:first-of-type { margin-top: .2rem; }




.copyright-footer.scrolling-page{
display: none;
}
.copyright-footer{
  grid-column: 2/3;
  position: absolute;
  bottom: 0;
}




/* !Mobile Styles */
.logotype{
  position: fixed;
}
.main-menu {
  margin-left: 6.2rem;
  padding-top: 1px;
  z-index: 7;
  position: relative;
  z-index: 10;
}
.menu-item{
     border-left: solid 1px var(--borderlight);
     padding-left: .6rem;
}
.main-menu li:last-of-type.menu-item{
height: 1.2rem;
margin-bottom: .7rem;
}
.breadcrumbs{
  position: fixed;
  top: 3rem;
  margin-left: 0;
  padding: 0;
  /* transition: opacity 0.3s ease; */
}
.right-column.divider-padding,
.copyright-footer.divider-padding{
  padding-left: 0;
  margin-left: 0;
}
.copyright-footer{
  bottom: .4rem;
}




.mobile-backing{
  background: var(--white);
  width: 100%;
  position: fixed;
  top:0;
  height: 6.8rem;
  z-index: 0;
  pointer-events: none;
}
.article-head-image {
  width: 80%;
  height: auto;
  aspect-ratio: 3:2;
  margin-top: 5rem;
}

.intro-blurb,
.faq{
  margin-top: 6rem;
}

.menu-item:first-of-type{
  padding-top: 2rem;
}

.work-counter{
  display: inline;
  float: right;
  color: var(--black);
  padding-top: 3px;
  letter-spacing: normal;
}


.standard-selected-work{
  display: none;
}

.logo-demo-container{
  width: 90%;
  /* background: green; */
  /* aspect-ratio: 1 / 1; */
    margin: auto;
    margin-top: 3dvh;


     position: fixed;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        /* background: green; */

        /* Prevent text selection and touch behaviors */
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: none;
}


/* FOOTER */
.credits-footer {
  margin-top: 12rem;
  display: flex;
  flex-direction: column;
  /* margin-bottom: 1rem; */
}
.credits-footer figure {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}
.author-profile-pic {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--profileyellow);
  flex-shrink: 0;
  margin-bottom: .2rem;
}
.credits-tabbing { padding-right:.3rem; }



/* INTERACTIVE */
a.current-menu-item { color: var(--black); }

/* Hide scrollbar globally by default */
::-webkit-scrollbar {
  display: none;
}
html, body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom scrollbar on desktop for scrolling pages (selected-work and thought pages) */
@media screen and (min-width: 650px) {
  /* HIDE native scrollbar completely on pages with custom scrollbar */
  body:has(.image-anchor) .right-column-inner::-webkit-scrollbar,
  body:has(.container-grid.selected-work) .right-column-inner::-webkit-scrollbar {
    display: none !important;
  }

  body:has(.image-anchor) .right-column-inner,
  body:has(.container-grid.selected-work) .right-column-inner {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Extend right column to viewport edge on scrolling pages */
  body:has(.image-anchor) .right-column,
  body:has(.container-grid.selected-work) .right-column {
    margin-right: -2rem;
    position: relative;
  }

  body:has(.image-anchor) .right-column-inner,
  body:has(.container-grid.selected-work) .right-column-inner {
    padding-right: calc(2rem - 11px);
  }

  /* Custom scrollbar element created via JavaScript */
  .custom-scrollbar-thumb {
    /* All styles set via JavaScript */
  }
}

/* Only apply hover effects on devices with true hover capability (not touch) */
@media (hover: hover) {
  a:hover {
    color: var(--lightgrey);
    -webkit-transition-duration: 300ms;
    -webkit-transition-property: color;
    -webkit-transition-timing-function: quintic;
    -moz-transition-duration: 300ms;
    -moz-transition-property: color;
    -moz-transition-timing-function: quintic;
    -o-transition-duration: 300ms;
    -o-transition-property: color;
    -o-transition-timing-function: quintic;

    /* Safari fix: add padding to prevent clipping */
    padding-top: 1px;
    margin-top: -1px;
  }
  a.current-menu-item:hover {

      color: var(--black);

  }
}

.logo-demo-container:hover{
  cursor: pointer;

}








/* IMAGES */

.article-figure-image,
figcaption {
  width: 70%;
  margin-left: calc(30% - .6rem);
}

.sub-column svg {
  width: 60%;
  padding-bottom: .5rem;
  margin-left: calc(30% - .6rem);
}
figure svg:last-of-type,
figure img:last-of-type { margin-bottom: .5rem; }


.selected-work-image{
  width: 100%;
  aspect-ratio: 3:2;
  margin: auto;
}






/* !In column figure */
.in-column-figure{
  display: none;
}






@media screen and (max-width: 1100px){



 .in-column-figure {
  display: block;
  margin-bottom: .8rem;


 }
 .in-column-figure figure {
  display: grid;
  grid-template-columns: 50% 50%;
  margin-left: 10%;
  width: 80%;
  height: auto;
  padding: 1rem 0;
}

.in-column-figure figcaption {
  margin: 0;
  padding: 0;
  width: 100%;
  grid-row: 2/3;
  /* background: green; */
}

.in-column-figure .figcaption-inline-right {
  grid-column: 2/3;
}


.in-column-figure .caption-author{
    margin-bottom: .5rem;

}

.in-column-figure svg {
  width: 100%;
  margin: auto;
  grid-column: 1/3;
  padding: 1rem 0;
  /* background: green; */
  /* padding: 1rem 0 2rem 0; */
  /* padding: .6rem; */
  /* background-color: green; */
}
}


@media screen and (max-width: 500px){
 .in-column-figure figure{
  width: 95%;
  margin: auto;

}
}






/* ───────── MEDIA QUERIES ───────── */
@media screen and (min-width: 651px) {
  .main-menu {
  margin-left: 0;
}
.logotype{
  position: relative;
}
.menu-item{
     border-left: none;
     padding-left: 0;
}
.menu-item:first-of-type{
  padding-top: 0;
}
.main-menu {
  margin-left: 0;
}
.main-menu li:last-of-type.menu-item{
height: auto;
margin-bottom: 0;
}
.breadcrumbs{
  display: block;
}
.breadcrumbs{
  position: relative;
  top: 0;
  margin-left: 0;
}
.mobile-backing{
 display: none;
}
.right-column.divider-padding,
.copyright-footer.divider-padding
{
 padding-left: .6rem; }


/* .copyright-footer {
display: none;
}
.copyright-footer-scrolling-page {
  position: relative;
  display: block;
} */
.copyright-footer{
  grid-column: 2/3;
  position: absolute;
  bottom: -0.35rem; /* Adjust to align baseline with column border bottom */
}
.copyright-footer.scrolling-page{
display: block;
}
figure.copyright-footer-article{
  display: none;
}


.standard-selected-work{
  display: block;
}
.mobile-selected-work{
  display: none;
}
.work-counter{
display: none;
}
}








/* Desktop grid */
@media screen and (min-width: 650px) {
  body {
    padding: 2rem;
    overflow: hidden; /* Prevent body from scrolling on desktop */
  }

  .container-grid {
    display: grid;
    grid-template-columns: .65fr 1.55fr .7fr 1.85fr;
    grid-template-rows: 1fr;
    gap: .2rem;
    height: calc(100dvh - 3rem);
    position: relative;
  }

  .logotype {
    grid-column: 1/2;
    grid-row: 1/2;
  }
    .main-menu {
    grid-column: 2 / 3;
    grid-row: 1/2;
  }

  .sub-column {
    grid-column: 3/4;
    position: relative;
  }

  .right-column {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .right-column-inner {
    flex: 1 1 0;
    overflow-y: auto;
  }

  .main-menu {
    height: 100%;
    border-left: solid 1px var(--borderlight);
    padding-top: 1px;
    /* margin-left: 8rem; */
  }

  /* .left-column {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: flex;
  } */
  .right-column {
    height: 100%;
    border-left: solid 1px var(--borderlight);
  }
  /* !SELECTED WORK PAGE RULES */
   .selected-work .right-column {
    height: 100%;
    border-left: none;
    padding-left: 0;
  }
    .logo-demo-container{
  grid-column: 2 / 4;
  width: 100%;
  max-width: 580px;
  margin: auto;
  align-self: center;
  z-index: 10;
  position: static;
  top: auto;
  left: auto;
  transform: none;

}





 /* Images */
 .article-head-image {
  width: 70%;
  height: auto;
  aspect-ratio: 3:2;
  margin-top: 10rem;
}
.selected-work-image{
  width: 100%;
  height: auto;
  aspect-ratio: 3:2;
  margin-bottom: .3rem;
}

.intro-blurb,
.faq{
  margin-top: 0;
}

}


/* Medium desktop range */
@media screen and (min-width: 650px) and (max-width: 1360px) {

  .container-grid {
    grid-template-columns: 8.2rem 1.55fr .9fr 2.8fr;
  }
  .main-menu {
    grid-column: 2 / 3; }

    .article-figure-image,
  figcaption,
  .sub-column svg {
    width: 70%;
    margin-left: calc(30% - .6rem);
  }

}






/* Narrower layout */
@media screen and (min-width: 650px) and (max-width: 1100px) {

  /* body{
      padding: 2rem 1rem 0 1rem;
  } */
  .container-grid {
    grid-template-columns: 8.2rem 1.8fr 0fr 3.5fr;
  }
  /* .main-menu {
    margin-left: .65rem;

  } */
  .sub-column { display: none; }
  .right-column {
    grid-column: 4 / 5;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .right-column-inner {
    flex: 1 1 0;
    overflow-y: auto;
  }

  .logo-demo-container{
  grid-column: 4 / 5;
  width: 100%;
  margin: auto;
  max-width: 460px;
  align-self: flex-end;
  /* margin-left: .8rem; */

}

}

/* Small tablets */
@media screen and (min-width: 650px) and (max-width: 880px) {

  body{
      padding: 2rem 1rem 0 1rem;
  }

   .container-grid {
    grid-template-columns: 5.9rem 2.4fr 0fr 3.9fr;
  }

  h1, h2, li.menu-item, p, ul li {
    font-size: 17px;
    line-height: 24px;
  }
  figure, .sub-menu-item {
    font-size: 14px;
    line-height: 19px;
  }
  li.menu-item{

    height: 1.5rem;



  }
  .sub-menu-item { padding-left: 2.5rem; }
  figcaption {
    font-size: 12px;
    line-height: 14px;
  }

  /* Maintain baseline alignment when font size reduces from 20px to 17px */
  .main-menu {
    padding-top: 0;
    margin-top: -0.1rem; /* Shift menu up to align with logotype and intro-blurb baseline */
  }

}





/* iPad / coarse pointer landscape */
@media screen and (pointer: coarse) and (orientation: landscape) and (min-width: 650px) {
  .container-grid {
    grid-template-columns: 8rem 1fr 1fr 2.3fr .4fr;
  }
}
  /* .main-menu { margin-left: 2rem; } */
  /* .article-figure-image,
  figcaption {
    width: 85%;
    margin-left: calc(15% - .6rem);
  }
  .sub-column svg {
    width: 70%;
    margin-left: calc(15% - .6rem);
  }
} */

/* iPad / coarse pointer portrait */
@media screen and (pointer: coarse) and (orientation: portrait) {
  p, .article-list li { max-width: 40ch; }
  .article-list { margin: -.4rem 0 .6rem .2rem; }
}

/* Mobile scroll prevention for non-article pages */
@media screen and (max-width: 650px) {
  /* Prevent scrolling on mobile for pages without .image-anchor elements (thought pages have them)
     BUT allow scrolling on FAQ pages (which have .faq article) */
  html:not(:has(.image-anchor)):not(:has(.faq)),
  body:not(:has(.image-anchor)):not(:has(.faq)) {
    overflow: hidden;
    height: 100dvh;
    box-sizing: border-box;
  }

  /* Constrain container to fit within viewport (except FAQ pages) */
  body:not(:has(.image-anchor)):not(:has(.faq)) .container-grid {
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
  }

  /* Explicitly allow scrolling on thought pages (pages with .image-anchor) and FAQ pages */
  html:has(.image-anchor),
  body:has(.image-anchor),
  html:has(.faq),
  body:has(.faq) {
    overflow: visible;
    height: auto;
  }

  /* Hide scrollbar on fixed pages (but not FAQ pages) */
  html:not(:has(.image-anchor)):not(:has(.faq))::-webkit-scrollbar,
  body:not(:has(.image-anchor)):not(:has(.faq))::-webkit-scrollbar {
    display: none;
  }
  html:not(:has(.image-anchor)):not(:has(.faq)),
  body:not(:has(.image-anchor)):not(:has(.faq)) {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Profile toggle styles */

/* --- Mobile (< 650px) --- */
@media screen and (max-width: 650px) {

  /* By default, the profile container is hidden and the animation is visible */
  .profile-container {
    display: none;
  }
  #graphic-animation {
    display: block;
  }

  /* When the body has the .profile-open class, switch visibility */
  body.profile-open .profile-container {
    display: block;
  }
  body.profile-open #graphic-animation {
    display: none; /* This removes the animation from the layout, making links clickable */
  }

  /* When the profile is open, we must raise the right column's stacking context
     so its links can be clicked. */
  body.profile-open .right-column {
    position: relative;
    z-index: 1;
  }

  /* Style the profile link based on state */
  .main-menu .menu-item a.current-menu-item[href*="profile"] {
    color: var(--basegrey); /* Default inactive color */
  }

  /* Only apply hover effects on devices with true hover capability (not touch) */
  @media (hover: hover) {
    .main-menu .menu-item a.current-menu-item[href*="profile"]:hover {
      color: var(--lightgrey); /* Hover color when inactive */
    }

    body.profile-open .main-menu .menu-item a.current-menu-item[href*="profile"]:hover {
      color: var(--black); /* Keep color black on hover when active */
    }
  }

  body.profile-open .main-menu .menu-item a.current-menu-item[href*="profile"] {
    color: var(--black); /* Active color */
  }
}

/* --- Desktop (> 651px) --- */
@media screen and (min-width: 651px) {
  /* On desktop, the profile is always visible and the link is always black */
  .profile-container {
    display: block;
  }
  #graphic-animation {
    display: block;
  }
  .main-menu .menu-item a.current-menu-item {
    color: var(--black);
  }
}


.faq-title-image {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--profileyellow);
  display: inline-block;
  margin: -3px .2rem 0 0;

  vertical-align: middle;

}


span.faq-footer{
  /* Default: fixed at bottom for desktop */
  position: absolute;
  bottom: 0;
}

/* Mobile FAQ pages ONLY: position footer at bottom of visible viewport or flow with content */
@media screen and (max-width: 650px) {
  /* Only apply to FAQ pages (pages with .faq article) - not thought pages */
  body:has(.faq) .credits-footer {
    /* Position relative to viewport on mobile */
    position: fixed;
    bottom: .4rem;
    left: 1rem;
    right: 1rem;
  }

  body:has(.faq) span.faq-footer {
    position: relative;
    bottom: auto;
  }

  /* When content overflows, unfix the footer container so it flows with content */
  body:has(.faq) span.faq-footer.faq-footer-scrollable {
    position: relative;
  }

  body:has(.faq-footer-scrollable) .credits-footer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
  }
}
.intro-blurb{
  max-width: 46ch;
}