:root {
  --blue: #1D66E8;
  --green: #2D941F;
  --grey: #F1F1F1;
  --color: inherit;
  --gridColumnGap: 4rem;
  --smallMargin: calc(var(--gridColumnGap)/4);
  --largeMargin: calc(var(--gridColumnGap) * 2);
  --sentenceMargin: 96px;
  --antFontSize: 12px;
  --SVGStrokeWidth: 4px; /*This is standardized across all svgs*/
  --strokeWidth: 2px; /*This is for images and underlines, which scale differently from svgs*/

  --antRowOffset: 0;
}

@font-face {
  font-family: 'miniature';
  src: url('/assets/fonts/miniature/Miniature-Display.woff2') format('woff2'),
      url('/assets/fonts/miniature/Miniature-Display.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "miniature", Arial, sans-serif;
  font-size:20px;
  line-height:1.4em;

  background: var(--grey);

  /* Disable mobile font boosting to ensure consistent font sizes, otherwise mobile browsers will increase font-size on long sections of text, such as projects with long descriptions */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Use dynamic viewport height to account for mobile address bar */
  min-height: -webkit-fill-available; /* Safari-specific fix for viewport issues */
  background: var(--grey);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.5s;
  z-index: 9999;
}

.preloader-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
  color: var(--color);
  
  /*Loading text is invisible on fast browsers, but on slow ones where the preloader is still visible after 1.5s, it fades into view*/
  opacity: 0;
  animation: fadeIn 0.3s forwards;
  animation-delay: 1.5s;  
  -webkit-animation-delay: 1.5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* TYPOGRAPHIC STYLINGS */
h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-size: inherit;
  font-weight:100;
  position:relative;
}

ol {
  margin: 0;
  padding-left: 1em;
}

/* h1 is for nothing rn
h2 is for nav home, .about-excerpt at bottom of homepage, .info on the about page, project titles and the various grid-item headers (e.g. "Ants," "Contact") on about page; 
h3 is for tags-index; 
h4 is for pagination; 
h5 is for "headers" in .project */

h1, h2 {
  letter-spacing: -.015em;
}

/* Can't add h1 into .nav.pages because the type sizes shift between desktop and mobile */
h1, h2, .nav.pages  {
  line-height: 1em;
}

h1 {
  font-size: 5em;
}

h2 {
  font-size: 4em;
}

h3 {
  font-size: 2.5em;
}

h4 {
  font-size: 1.75em;
}

h5 {
  font-size: 1em;
  display:inline;
  color: black;
}

p {
  /* font-family: Helvetica, sans-serif;
  font-size: .9em; */
}

strong {
  -webkit-text-stroke: 0.8px;
  letter-spacing: 0.03em;
}

em {
  font-style: normal;
  position:relative;
}

.split-word {
  display:inline-block;
  white-space: nowrap;
}

em .split-character {
  display:inline-block;
  -webkit-transform: rotate(15deg);
  letter-spacing: .02em;
}

/* Text selection styling: this only works on google chrome desktop. Less ideal application on safari and firefox desktop, and none at all on mobile. Nothing to be done about it. */
::selection {
  background-color: var(--color);
  color: var(--grey, #F1F1F1);
}
::-webkit-selection {
  background-color: var(--color);
  color: var(--grey, #F1F1F1);
}
::-moz-selection {
  background-color: var(--color);
  color: var(--grey, #F1F1F1);
}

.animated-svg::selection, .animated-svg-comma::selection, .animated-svg-pageNum::selection, .nav-btn-mobile::selection {
  stroke: var(--grey, #F1F1F1);
}
.animated-svg::-webkit-selection, .animated-svg-comma::-webkit-selection, .animated-svg-pageNum::-webkit-selection, .nav-btn-mobile::-webkit-selection {
  stroke: var(--grey, #F1F1F1);
}
.animated-svg::-moz-selection, .animated-svg-comma::-moz-selection, .animated-svg-pageNum::-moz-selection, .nav-btn-mobile::-moz-selection {
  stroke: var(--grey, #F1F1F1);
}

/* SCROLLBAR STYLING */
/* Firefox - uses standard properties */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--color) var(--grey, #F1F1F1);
}

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--grey, #F1F1F1);
}

::-webkit-scrollbar-thumb {
  background: var(--color);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color);
  filter: brightness(0.9);
}

::-webkit-scrollbar-corner {
  background: var(--grey, #F1F1F1);
}

/* HR STYLING */
hr {
  border: none;
  margin: 1em 0;
}

/* HIDDEN */
.hidden {
  display:none;
}

/* LINKS STYLING */
a, a:visited {
  color: inherit; /* Keep the same color as unvisited links */
}

.projects, .project-entry, .built-environment, .dreamed-environment, .illustration, .writing {
  --color: var(--blue);
  color: var(--blue);
}

.news, .news-entry, .press, .award, .event, .service {
  --color: var(--green);
  color: var(--green);
}

.home, .about {
  --color: black;
  color: black;
}

a:hover, .tag:hover {
  cursor: pointer;
}

/* UNDERLINE STYLINGS */
a, [data-underline-hover], [data-underline-fixed] { 
  text-decoration: none;

  background-image: 
    -webkit-linear-gradient(right, transparent 50%, var(--color) 50%), 
    -webkit-linear-gradient(right, transparent 50%, var(--color) 50%), 
    -webkit-linear-gradient(top, transparent 50%, var(--color) 50%), 
    -webkit-linear-gradient(top, transparent 50%, var(--color) 50%);

  background-size: 0, 10px var(--strokeWidth), 0, 0;

  /* ?? This is nicer but the animation noticeably resets */
  /* background-size: 0, 1em .1em, 0, 0; */

  background-position: 0 0,  0 100%,  0 0,  100% 0;
  background-repeat: repeat-x,  repeat-x,  repeat-y, 
    repeat-y;
}

a:hover, [data-underline-hover]:hover, [data-underline-fixed]:hover {
  animation: marching-ants 3s linear infinite;
  -webkit-animation: marching-ants 3s linear infinite;
  animation-play-state: running;
  -webkit-animation-play-state: running;
}

/* .marching-img has its own background-image, so having that on a is redundant. This becomes an obvious issue on the .about page's PDF */
.nav-menu a, .tags-index *, .pagination a, .title-link, a:has(.marching-img)  {
  background-image: none; /*Some sections don't have underline styling as default, so override*/
}

[data-underline-fixed], [data-underline-hover]:hover, .about a:hover, .projects a:hover, .news a:hover {
  background-image: 
    -webkit-linear-gradient(right, transparent 50%, var(--color) 50%), 
    -webkit-linear-gradient(right, transparent 50%, var(--color) 50%), 
    -webkit-linear-gradient(top, transparent 50%, var(--color) 50%), 
    -webkit-linear-gradient(top, transparent 50%, var(--color) 50%);
}

@keyframes marching-ants {
  0% {
    background-position: 0 0,  0 100%,  0 0,  100% 0;
  }
  100% {
    background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px;
  }
}

/* ANIMATED DASHED TYPE */
.nav.home {
  flex:1; /*Need this so that the type doesn't line-break early and instead fills available horizontal space*/
  /* background:wheat; */
}

.nav.home svg {
  margin-top: calc(-1 * var(--antFontSize)); /*To top-align with side nav*/
}

.animated-svg, .animated-svg-comma, .animated-svg-pageNum, .nav-btn-mobile {
  stroke: var(--color);
  fill:none;

  stroke-width: var(--SVGStrokeWidth);
  stroke-dasharray: 6px 4px; /*This works for chrome and firefox, need to set different values for safari in js*/

  animation: dash-outline 20s linear infinite;

  /* background:red; */
}

.animated-svg{
  stroke:black;
  width:100%;
  height:auto;
}

/* This is distinguished from .animated-svg since it doesn't need to be resized in js */
.animated-svg-comma, .animated-svg-pageNum {
  width:auto;
  vertical-align:text-bottom;
}

.animated-svg-comma {
  height:1.5em;
}

@keyframes dash-outline {
  0% {
    stroke-dashoffset: 100; /* Starting offset */
  }
  100% {
    stroke-dashoffset: 0;  /* Ending offset */
  }
}

/* SECTIONS */
/* SPACING */
.grid-item, .picture-wrapper, .unit, ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
  align-content: start;
}

/* .svgParagraph only appears in svgText.php */
.animated-svg:not(:last-child), .svgParagraph:not(:last-child) {
  margin: 0 0 .25em 0;
}

.nav-menu, .tags-index, .grid-item, .pagination, .about-excerpt, .intro, .footer-item {
  padding-top: var(--smallMargin);
}

.tags-index, .grid-item, .pagination, .about-excerpt, .intro {
  padding-bottom: var(--largeMargin);
}

.nav-menu, .pages, .footer-item {
  padding-bottom: var(--smallMargin);
}

.grid-item {
  padding-top: calc((var(--gridColumnGap) - var(--antFontSize))/2); /*To make this even with the margins on the ant columns, have to subtract ant-row height from ant-column width and divide by 2 */
}

/* CONTAINER */
.container {
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  position:relative;
  width:100%;
  overflow: hidden;

  /* background: lightslategray; */
}

.content {
  position:relative;
  width:calc(100% - 2 * var(--gridColumnGap)); /* this is to leave room for the 2 .ant-column.side */
  max-width:1400px;

  /* background: maroon; */

  color: var(--color);
}

/* NAV */
.nav-menu, .pages {
  display: flex;
  flex-flow: row wrap;
}

.nav-menu {
  width:100%;
  justify-content: space-between;
}

.nav-btn-mobile {
  display:none;
}

.pages {
  gap: var(--smallMargin);
  justify-content: space-between;
}

/* TAGS STYLING */
.tag{
  /* background: wheat; */
}

.tag-block {
  display: inline;
  /* background:darkkhaki; */
}

.about-excerpt {
  width:100%; /* needs this or else it gets really narrow and cut off */
}

/* FOOTER */
footer {
  --color: black; /* Override the --color variable so that the footer text is always black */
}

footer * {
  color:black;
}

.footer-items {
  grid-template-columns: repeat(4, 1fr);
}

/* GRID CONTAINER STYLING */
.grid-container, .ant-columns, .footer-items {
  display: grid;
  grid-template-rows: auto;
}

/* Container for the grid */
.grid-container, footer {
  position: relative; /* To contain the moving text */
  overflow-x:visible;
  /* background:pink; */
}

.grid-container, .footer-items {
  gap: 0 var(--gridColumnGap);
}

/* Style for grid items */
.grid-item.no-img {
  padding-bottom: calc(2 * var(--largeMargin)) !important; /*Add a minimum bottom padding to entries that don't have any images, especially relevant for mobile*/
}

.pagination {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--smallMargin);
}

/* Pagination styling for multi-row layout */
.pagination.multi-row .pageNums {
  flex: 1 1 100%;
  text-align: center;
}

.prevNext {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--smallMargin);
}

.ant-columns {
  position: absolute;
  z-index: 100; /* Make sure it's above .grid-item so that it can capture pointer events for antsAvoidCursor() */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y:hidden;
  grid-template-columns: repeat(3, 1fr var(--gridColumnGap)) 1fr;
  gap: 0;

  overflow-x:hidden;

  pointer-events: none; /* Allow clicks to pass through to .grid-item below */

  /* background:rgba(100,50,100,.5); */
}

.ant-row, .ant-column {
  position:relative;

  font-size: var(--antFontSize);
  white-space: nowrap;
  z-index: 100; 

  display:flex;
  flex-flow: row wrap;
  align-items: center;

  /* background:lightgreen; */
  
  user-select: none;
}

.ant-column {
  position:relative;
  writing-mode: vertical-rl;
  
  /* hide scrollbar */
  -ms-overflow-style: none; 
  scrollbar-width: none;  
  width: var(--gridColumnGap);
  height:100%;

  color:var(--color);

  /* background:rgba(100,50,100,.5); */
}

.ant-column::-webkit-scrollbar {
  display: none;
}


/* Full width row */
.full-row {
  grid-column: 1/-1; /* Span all columns */
}

.ant-row {
  top: 0;
  width:100%;
  height:var(--antFontSize);

  left: var(--antRowOffset);

  /* background:yellow; */
}

/* Style for moving text */
.sentence {
  position:absolute;
  white-space: nowrap;
  display:inline-block;

  /* background: orange; */
}

.ant-row .sentence {
  margin:0 var(--sentenceMargin) 0 0; /* spacing between sentences */
}

.ant-column .sentence {
  margin:0 0 var(--sentenceMargin) 0; /* spacing between sentences */
}

.ant-row .word {
  margin: 0 2em; /* word spacing */
}

.ant-column .word {
  margin: 2em 0em; /* word spacing */
}

.word {
  cursor:pointer;
  /* background:darkred; */
}

.character {
  display: inline-block;
  position:relative;
  transition: left .1s ease-in-out, top .1s ease-in-out;
  pointer-events: auto; /* Re-enable pointer events for cursor avoidance hover */
  /* background:blue; */
}

/* IMAGES * Videos*/
img, video {
  width:100%;
  display:block;
  height: auto;
}

img {
  max-width: 100%;
  max-height:100%;
}

/* Marching ants img */
.marching-img {
  position:relative;
  border: var(--strokeWidth) solid transparent; /* Need to manually thin the stroke on images since they scale different compared to svgs*/

  background: linear-gradient(transparent, transparent) content-box,
    repeating-linear-gradient(-45deg, var(--color) 0, var(--color) 25%, transparent 0, transparent 50%) 0 / .6em .6em;

  animation: dashed-border 60s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
}

.marching-img:hover {
  animation-play-state: running;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
}

@keyframes dashed-border { to { background-position: 100% 100% } }


.overlay {
  background:var(--grey);
  position: absolute;
  top: 0;
  left: 0;
  z-index:10;
  width:100%;
  height:100%;
  display:none;
}

.img-news .overlay, .img-about .overlay, .img-project:hover .overlay {
  display:block;
}

.img-news:hover .overlay, .img-project .overlay  {
  display:none;
}


/* MEDIA QUERIES */
@media (max-width: 768px) {
  h1, h2 {
    font-size: 3em;
  }

  h3, h4 {
    font-size: 1.5em; 
  }
}

@media (max-width:480px) {
  :root {
    --itemsPerRow: 1 !important; /*need this to override settings on other css*/

    --sentenceMargin: 48px;
    --antFontSize: 10px;
    --gridColumnGap: 2rem;
    --smallMargin: calc(var(--gridColumnGap)*.75);
    --largeMargin: var(--gridColumnGap);

    --SVGStrokeWidth: 1px;
    --strokeWidth: 1.5px;
  }

  /* TYPE STYLINGS */
  body {
    font-size:16px;
  }

  /* have .nav.pages match h1 on mobile */
  .nav.pages {
    font-size: 3em;
    letter-spacing: -.015em;
  }

  strong {
    -webkit-text-stroke: .5px;
    letter-spacing: 0.0125em;
  }

  /* GRID COLUMNS */
  .grid-container, .footer-items {
    grid-template-columns: 1fr !important; /*need this to override settings on other css*/
  }
  
  .container {
    justify-content: space-between;
  }
  
  .content {
    width:100%;
  }

  /* SPACING: adjusted so that there aren't large bottom margins on mobile, and also margins on the side so they don't collide with the side ant-columns */
  .nav-menu, .tags-index, .grid-item, .pagination, .about-excerpt, .intro, .video-caption {
    padding: var(--smallMargin) var(--largeMargin) !important;
  }
  
  .footer-item {
    padding: 0 var(--largeMargin) var(--smallMargin) var(--largeMargin);
  }

  .footer-item:first-of-type {
    padding-top: var(--smallMargin);
  }

  .tags-index {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    align-content: start;
  }

  /* MOBILE NAV */
  .nav.pages {
    display:none;
    margin-top: var(--antFontSize);
    /* background:blue; */
  }

  .nav.home {
    flex: none; /*need to remove flex on mobile or else it disappears*/
  }

  .nav-btn-mobile {
    position:fixed;
    z-index: 1001; /*Make sure this is higher than .nav-menu.open's 1000 */
    top: var(--smallMargin);
    right: var(--largeMargin);

    display:block;
    width:var(--gridColumnGap);
    max-height:3em;
  }

  body.menu-open {
    overflow: hidden; /* Prevent background scrolling when menu is open */
  }

  .nav-menu.open {
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    min-height: -webkit-fill-available; /* Safari-specific fix for viewport issues */
    background:var(--grey);

    align-content: flex-start; /*?? Why do i need this for the items not to stretch vertically?*/
  }

  .nav-menu.open .nav.pages {
    display:block;
    width:100%;
  }
  
  .nav-menu.open .nav-btn-mobile {
    fill:black;
    stroke: none;

    stroke-width: 0;
    stroke-dasharray: none;
    
    animation: none;
  }

  /* ANT COLUMNS */
  .ant-columns {
    display:none;
  }

  .ant-column.side {
    position:absolute;
    top:0;
  
    display:flex;
    flex-flow: row wrap;
    align-items: center;

    width: var(--antFontSize);
    /* background:lightgreen; */
  }

  .ant-column.side.left {
    left:0;
  }
  .ant-column.side.right {
    right:0;
  }

  /* UNDERLINES */
  .nav-menu a, [data-underline-hover], [data-underline-fixed] {
    background-position: 0 0,  0 90%,  0 0,  90% 0;
    animation: marching-ants 8s linear infinite;
    -webkit-animation: marching-ants 8s linear infinite;
  }

  @keyframes marching-ants {
    0% {
      background-position: 0 0,  0 90%,  0 0,  90% 0;
    }
    100% {
      background-position: 40px 0, -40px 90%, 0 -40px, 90% 40px;
    }
  }

}