* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
      cursor: none; /* Hide native cursor for custom cursor */
    }

    /* Custom cursor with multiply blend mode. CONSTRAINT: this block, the
       `cursor: none` above, and the `.custom-cursor.visible`/`.active`
       states below must keep matching js/cursor.js's expectations exactly —
       it queries `.custom-cursor` and toggles those two classes; it does
       not create the element or set these base styles itself. */
    .custom-cursor {
      position: fixed;
      left: 0;
      top: 0;
      width: 26px;
      height: 26px;
      pointer-events: none;
      z-index: 999999;
      mix-blend-mode: multiply;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url('../../assets/images/C_1.png');
      transform: translate(-50%, -50%);
      opacity: 0; /* Hidden initially until loader finishes */
      transition: opacity 0.3s ease;
      will-change: transform, left, top;
      display: block;
    }
    
    .custom-cursor.visible {
      opacity: 1;
    }

    /* The active image URL is set as a custom property by assets.js at load
       time (CSP-safe: no injected <style>). Relative URL is the no-JS fallback. */
    .custom-cursor.active {
      background-image: var(--cursor-active-image, url('../../assets/images/C_2.png')) !important;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    body {
      font-family: 'Space Mono', monospace;
      background-color: #ffffff;
      color: #000000;
      font-size: 1em;
      line-height: 100%;
      font-weight: 400;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    /* UNIVERSAL 1EM MARGIN - NEVER TO BE VIOLATED */
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
  }

    /* Prevent any element from extending past the universal margin */
    *:not(body):not(#site-loader):not(#site-loader *):not(.column-guides):not(.column-guide):not(.row-guide) {
      max-width: calc(100vw - 2em) !important;
    }

    /* Loader styles */
    #site-loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #ffffff;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
    }

    #site-loader.hidden {
      display: none;
    }

    /* Loader positioning - Desktop: spans columns 5-7 (3 columns total) */
    .loader-container {
      position: fixed;
      left: calc(1em + 4 * ((100vw - 13em) / 12 + 1em)); /* Start at column 5 */
      width: calc(2 * ((100vw - 13em) / 12 + 1em) + (100vw - 13em) / 12); /* Span columns 5-7 (3 columns) */
      top: calc(1em + 2 * ((100vh - 7em) / 6 + 1em)); /* Start at row 3 */
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Tablet responsive loader - spans columns 3-6 (4 columns total) */
    @media (max-width: 1279px) and (min-width: 769px) {
      .loader-container {
        left: calc(1em + 2 * ((100vw - 9em) / 8 + 1em)); /* Start at column 3 */
        width: calc(3 * ((100vw - 9em) / 8 + 1em) + (100vw - 9em) / 8); /* Span columns 3-6 (4 columns) */
      }
    }

    /* Mobile responsive loader - spans 5 columns width within mobile grid */
    @media (max-width: 768px) {
      .loader-container {
        left: 1em; /* Start at left margin */
        width: calc((100vw - 2em - 1.25em) / 6 * 5 + 4 * 0.25em); /* 5 columns + 4 gutters */
      }
    }

    .loader-digit {
      height: auto;
      width: auto;
      display: block;
      /* PNG can use full container width (5 columns) */
      max-width: 100%; /* Use full container width */
      /* Add slight curve/contrast to make 5% blacker */
      filter: brightness(0.95) contrast(1.05);
    }

    /* Make 100% loader image 25% larger on desktop only */
    .loader-digit[src*="100.png"] {
      max-width: 125%; /* Allow it to be 25% larger than container */
      width: 125%; /* Explicit width to match max-width */
      transform: scale(1.25);
    }

    /* 100% image spans full 6 columns on mobile */
    @media (max-width: 768px) {
      .loader-digit[src*="100.png"] {
        position: fixed;
        left: 1em; /* Start at left margin */
        top: 50%; /* Center vertically */
        transform: translateY(-50%); /* Perfect vertical centering */
        width: calc(100vw - 2em); /* Full width minus margins (6 columns) */
        max-width: none; /* Override container constraints */
      }
    }

    /* Selective case mode - when 'C' key toggles to Title Case */
    body.selective-case {
      text-transform: none;
    }

    /* Keep nav items uppercase in selective mode */
    body.selective-case .nav-toggle {
      text-transform: uppercase !important;
    }

    /* Keep contact labels uppercase, values in sentence case */
    body.selective-case .contact-label {
      text-transform: uppercase !important;
    }

    body.selective-case .contact-value {
      text-transform: capitalize !important;
    }

    /* Force Title Case for project rows in selective mode */
    body.selective-case .project-item {
      text-transform: capitalize !important;
    }

    .logo {
      position: fixed;
      top: 1em;
      left: 1em;
      width: calc(100vw - 2em); /* Full 12 columns within body padding */
      height: auto;
      padding: 0;
      z-index: 500;
      pointer-events: none;
      mix-blend-mode: multiply;
      opacity: 1;
      transition: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
    }

    /* Director logo positioning - spans columns 6-12, starts at row 2.
       One rule for every director: the class is applied by navigation.js
       whenever a director logo is showing, whoever the director is. */
    .logo.logo--director {
      left: calc(1em + 5 * ((100vw - 13em) / 12 + 1em)); /* Start at column 6 */
      top: calc(1em + (100vh - 7em) / 6 + 1em); /* Start at row 2 */
      width: calc((100vw - 13em) / 12 * 7 + 6em); /* 7 columns + 6 gutters */
      right: 1em; /* Respect right margin */
      padding: 0;
    }

    /* Tablet responsive director logo (8 columns) - span columns 4-8 */
    @media (max-width: 1279px) and (min-width: 769px) {
      .logo.logo--director {
        left: calc(1em + 3 * ((100vw - 9em) / 8 + 1em)); /* Start at column 4 */
        width: calc((100vw - 9em) / 8 * 5 + 4em); /* 5 columns (4-8) + 4 gutters */
        right: auto;
      }
    }

    /* Mobile responsive director logo (6 columns) */
    @media (max-width: 768px) {
      .logo.logo--director {
        left: 1em; /* Start at left margin */
        width: calc(100vw - 2em); /* Full width within margins */
        right: 1em; /* End at right margin */
        top: calc((1em + (100vh - 7em) / 6 + 1em) * 1.2); /* 20% lower than desktop */
      }
    }

    .logo.hidden {
      opacity: 0;
    }

    /* Keyboard focus: the nav and lightbox controls are reachable by tab
       (S7 rebuild of this surface; R18 a11y binds here). Pointer users see
       no change — :focus-visible fires for keyboard focus only. */
    .nav-toggle:focus-visible,
    .project-item:focus-visible,
    [role='button']:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }

    .nav {
      position: fixed;
      bottom: 1em;
      left: 1em;
      z-index: 2000;
    }

    /* The roster is bottom-anchored and fixed, so on a phone a long
       director's rows ran off the top of the screen with nothing to scroll.
       Capping the nav at the viewport turns it into its own scroll container
       the moment its content is taller. CONSTRAINT: phone widths only. At
       desktop and tablet the nav can overflow its own box by a pixel or two
       and that overflow is currently painted; a scroll container would clip
       it, which is a pixel change the desktop baseline must not take. */
    @media (max-width: 768px) {
      .nav {
        max-height: calc(100vh - 2em);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
    }

    .nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-item {
      margin-bottom: 0;
    }

    .nav-toggle {
      margin-bottom: 0;
    }

    .nav-toggle:hover {
      color: rgba(0, 0, 0, 0.5);
    }

    .nav-sublist {
      list-style: none;
      margin: 0;
      padding: 0;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-10px);
      transition: max-height 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
                  opacity 0.3s ease-out, 
                  margin-bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                  transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .nav-sublist.open {
      max-height: 800px;
      opacity: 1;
      margin-bottom: 0;
      transform: translateY(0);
    }

    /* A closed sublist is invisible, but for the 0.3s the collapse animates
       it still has a box, and its rows still answer hit tests — they used to
       swallow taps meant for the list underneath. pointer-events is not an
       animated property, so the collapse still looks exactly as it did. */
    .nav-sublist:not(.open),
    .nav-sublist:not(.open) * {
      pointer-events: none;
    }

    /* Add spacing only to Directors sublist */
    #directors-content.open {
      margin-bottom: 1em;
    }

    /* Ensure every director row is visible when Directors is open */
    #directors-content > li {
      display: list-item;
      margin-bottom: 0.25em;
    }
    #directors-content > li:last-child {
      margin-bottom: 0;
    }

    /* Add spacing to About sublist as well */
    #about-content.open {
      margin-bottom: 1em;
    }

    .nav-sublist li {
      padding-left: 1em;
      margin-bottom: 0;
      opacity: 0;
      transform: translateY(-5px);
      transition: opacity 0.2s ease-out 0.1s, transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
    }

    .nav-sublist.open li {
      opacity: 1;
      transform: translateY(0);
    }

    .nav-sublist .nav-sublist li {
      padding-left: 1em;
      transition-delay: 0.2s;
    }

    /* Bio content should match the same indentation as project rows (1em) */
    .bio-item .nav-sublist li {
      padding-left: 1em;
    }

    .nav-sublist .nav-sublist li:nth-child(2) {
      transition-delay: 0.25s;
    }

    .nav-sublist .nav-sublist li:nth-child(3) {
      transition-delay: 0.3s;
    }

    .nav-sublist .nav-sublist li:nth-child(4) {
      transition-delay: 0.35s;
    }

    /* Reset list items when closing */
    .nav-sublist:not(.open) li {
      opacity: 0;
      transform: translateY(-5px);
      transition-delay: 0s;
    }

    /* Contact links styling */
    .nav-sublist li a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .nav-sublist li a:hover {
      color: rgba(0, 0, 0, 0.5);
    }

    /* Project items */
    .project-item {
      margin-bottom: 0;
    }

    .project-item:hover {
      color: rgba(0, 0, 0, 0.5);
    }


    /* Loading state for project items */
    .project-item.loading {
      pointer-events: none; /* Disable all mouse interactions during loading */
    }

    /* Loading cursor for the entire body when projects are loading */
    body.loading {
      /* Custom cursor handles this */
    }

    /* Ensure all interactive elements show loading cursor during loading */
    body.loading * {
      /* Custom cursor handles this */
    }

    /* Video Player - verbatim from root index.html */
    .director-portfolio-lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: transparent;
      flex-direction: column;
      z-index: 1700;
    }

    .director-portfolio-lightbox[data-active="1"] {
      display: flex;
    }

    /* Close control. Black, not the white the fix contract named: this player
       has a transparent backdrop over the site's white page, so a white glyph
       would be invisible (QLOG r22rev #5). Type matches the other lightbox
       controls; no background, so the only pixels it adds are the glyph. */
    .director-portfolio-lightbox-close {
      /* Fixed, not absolute: the universal max-width rule clamps the lightbox
         to 100vw - 2em, so an absolute right:1em would land 3em from the
         screen edge instead of on the site's 1em margin line. */
      position: fixed;
      /* The glyph sits on the site's 1em margin line, but the TAP TARGET is a
         44px box centred on it (Apple's minimum; the bare glyph measured
         9x16px in the R22 re-click-through — a thumb missed it). The offsets
         subtract the padding so the ✕ itself does not move. */
      top: calc(1em - 14px);
      right: calc(1em - 16px);
      z-index: 1;
      color: #000;
      font-family: 'Space Mono', monospace;
      font-size: 1em;
      line-height: 100%;
      font-weight: 400;
      letter-spacing: -0.02em;
      background: none;
      padding: 14px 16px;
      min-width: 44px;
      min-height: 44px;
      box-sizing: content-box;
      text-align: center;
      transition: opacity 0.1s ease;
    }

    .director-portfolio-lightbox-close:hover {
      opacity: 0.5;
    }

    .director-portfolio-lightbox-media {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 1em;
    }

    .director-portfolio-lightbox-media-video-container {
      position: relative;
      display: inline-block;
    }

    .director-portfolio-lightbox-media-video {
      max-width: calc((100vw - 13em) / 12 * 8 + 7em); /* 8 columns + 7 gutters - Desktop/Laptop */
      max-height: calc(100vh - 2em);
      width: calc((100vw - 13em) / 12 * 8 + 7em); /* Explicit width to match max-width */
      height: auto;
      object-fit: contain;
      display: block;
      vertical-align: top;
      transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
    }

    /* Tablet video sizing - 8 columns on tablet grid */
    @media (max-width: 1279px) and (min-width: 769px) {
      .director-portfolio-lightbox-media-video {
        max-width: calc((100vw - 9em) / 8 * 8 + 7em); /* All 8 columns on tablet */
        width: calc((100vw - 9em) / 8 * 8 + 7em); /* Explicit width to match max-width */
      }
    }

    /* Vertical breakpoint - constrain video to 6 columns on short screens */
    @media (max-height: 900px) {
      .director-portfolio-lightbox-media-video {
        max-width: calc((100vw - 13em) / 12 * 6 + 5em); /* 6 columns + 5 gutters */
        width: calc((100vw - 13em) / 12 * 6 + 5em); /* 6 columns + 5 gutters */
      }
    }

    /* Mobile responsive video sizing */
    @media (max-width: 768px) {
      .director-portfolio-lightbox-media-video {
        max-width: calc(100vw - 2em);
        width: calc(100vw - 2em);
        max-height: calc(100vh - 2em);
      }
    }

    .director-portfolio-lightbox-media-playbar {
      width: 100%;
      height: 4px;
      background: rgba(0, 0, 0, 0.3);
      margin-top: 0;
      opacity: 0;
      transition: opacity 0.1s ease;
    }

    .director-portfolio-lightbox-media-playbar.show {
      opacity: 1;
    }

    .director-portfolio-lightbox-media-playbar-meter {
      width: 100%;
      height: 100%;
    }

    .director-portfolio-lightbox-media-playbar-meter-progress {
      width: 0%;
      height: 100%;
      background: #000;
    }

    .director-portfolio-lightbox-video-controls {
      margin-top: 1em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      opacity: 0;
      transition: opacity 0.1s ease;
    }

    .director-portfolio-lightbox-video-controls.show {
      opacity: 1;
    }

    .director-portfolio-lightbox-video-controls-left {
      display: flex;
      align-items: center;
      gap: 1em;
    }

    .director-portfolio-lightbox-video-controls-right {
      color: #000;
      font-family: 'Space Mono', monospace;
      font-size: 1em;
      line-height: 100%;
      font-weight: 400;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }

    .director-portfolio-lightbox-controls-play,
    .director-portfolio-lightbox-controls-pause {
      color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      line-height: 18px;
      transition: opacity 0.1s ease;
    }

    .director-portfolio-lightbox-controls-play:hover,
    .director-portfolio-lightbox-controls-pause:hover {
      opacity: 0.5;
    }

    .director-portfolio-lightbox-controls-play[data-active="0"],
    .director-portfolio-lightbox-controls-pause[data-active="0"] {
      display: none;
    }

    .director-portfolio-lightbox-controls-play svg,
    .director-portfolio-lightbox-controls-pause svg {
      fill: #000;
      stroke: #000;
    }

    .director-portfolio-lightbox-controls-time {
      color: #000;
      font-family: 'Space Mono', monospace;
      font-size: 1em;
      line-height: 100%;
      font-weight: 400;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }

    /* Video hover overlay - verbatim from root index.html */
    .video-hover-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: transparent;
      display: none;
      flex-direction: column;
      z-index: 400;
      pointer-events: none;
    }

    .video-hover-overlay[data-active="1"] {
      display: flex;
    }

    .video-hover-overlay-media {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 1em;
    }

    .video-hover-overlay-media-video-container {
      position: relative;
      display: inline-block;
    }

    .video-hover-overlay-media-video {
      max-width: calc((100vw - 13em) / 12 * 8 + 7em); /* 8 columns + 7 gutters - Desktop/Laptop */
      max-height: calc(100vh - 2em);
      width: calc((100vw - 13em) / 12 * 8 + 7em); /* Match max-width for images */
      height: auto;
      object-fit: contain;
      display: block;
      vertical-align: top;
      transform: translateZ(0);
      backface-visibility: hidden;
      transition: none !important;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
    }

    /* Tablet hover overlay video sizing - 8 columns on tablet grid */
    @media (max-width: 1279px) and (min-width: 769px) {
      .video-hover-overlay-media-video {
        max-width: calc((100vw - 9em) / 8 * 8 + 7em); /* All 8 columns on tablet */
        width: calc((100vw - 9em) / 8 * 8 + 7em); /* Match max-width for images */
      }
    }

    /* Vertical breakpoint - constrain hover video to 6 columns on short screens */
    @media (max-height: 900px) {
      .video-hover-overlay-media-video {
        max-width: calc((100vw - 13em) / 12 * 6 + 5em); /* 6 columns + 5 gutters */
        width: calc((100vw - 13em) / 12 * 6 + 5em); /* 6 columns + 5 gutters */
      }
    }

    /* Mobile responsive hover overlay video sizing */
    @media (max-width: 768px) {
      .video-hover-overlay-media-video {
        max-width: calc(100vw - 2em);
        width: calc(100vw - 2em);
        max-height: calc(100vh - 2em);
      }
    }

    /* Contact image overlay */
    .contact-image-overlay {
      position: fixed;
      /* Span columns 2-3: start at column 2, span 2 columns */
      left: calc(1em + 1 * ((100vw - 13em) / 12 + 1em)); /* Start at column 2 */
      width: calc((100vw - 13em) / 12 * 2 + 1em); /* 2 columns + 1 gutter */
      /* Start at row 3 */
      top: calc(1em + 2 * ((100vh - 7em) / 6 + 1em)); /* Start at row 3 (0-indexed, so row 3 = index 2) */
      background: transparent;
      display: none;
      z-index: 1000;
      pointer-events: none;
    }

    .contact-image-overlay.show {
      display: block;
    }

    .contact-image-overlay img {
      width: 100%;
      height: auto;
      opacity: 1;
      transition: none;
    }


    /* Mobile responsive contact image */
    @media (max-width: 768px) {
      .contact-image-overlay {
        /* On mobile, use simpler positioning */
        left: 1em;
        width: calc((100vw - 2em) / 3); /* Roughly 2 columns on mobile 6-col grid */
        top: calc(1em + 2 * ((100vh - 7em) / 6 + 1em)); /* Still row 3 */
      }
    }


    /* Bio content styling */
    #bio-content {
      pointer-events: none; /* Disable all hover/interaction on entire bio content */
      padding-left: 1em; /* Same indentation as other nav-sublist items */
    }

    /* Hide all other project items when bio is open */
    #bio-content.open ~ .project-item:not(.bio-item) {
      display: none;
    }
    
    #bio-content li p {
      margin: 0;
      padding: 0;
      max-width: calc((100vw - 13em) / 12 * 6 + 5em); /* 6 columns + 5 gutters - Desktop */
      word-wrap: break-word;
    }

    /* Tablet responsive bio text - 8 columns */
    @media (max-width: 1279px) and (min-width: 769px) {
      #bio-content li p {
        max-width: calc((100vw - 9em) / 8 * 6 + 5em); /* 6 columns + 5 gutters - Tablet */
      }
    }

    /* Mobile responsive bio text - all columns */
    @media (max-width: 768px) {
      #bio-content li p {
        max-width: calc((100vw - 2em - 1.25em) / 6 * 4 + 3em); /* 4 columns + 3 gutters - Mobile */
      }
    }

    /* Prevent dragging for all images and videos */
    img, video {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
    }

    /* Temporary column guides - 12 columns with 1em gutters */
    .column-guides {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 99999;
      display: block; /* Show guides by default */
    }

    .column-guides.hidden {
      display: none;
    }

    .column-guide {
      position: absolute;
      top: 0;
      height: 100vh;
      background: rgba(255, 0, 0, 0.1);
      border-left: 1px solid rgba(255, 0, 0, 0.3);
      border-right: 1px solid rgba(255, 0, 0, 0.3);
    }

    /* Row guides - 6 rows with 1em gutters */
    .row-guide {
      position: absolute;
      left: 0;
      width: 100vw;
      background: transparent;
      border-top: 1px solid rgba(0, 150, 255, 1);
      border-bottom: 1px solid rgba(0, 150, 255, 1);
    }

    /* 12 columns with 1em gutters - Desktop/Laptop (1280px+) */
    .column-guide:nth-child(1) { left: 1em; width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(2) { left: calc(1em + (100vw - 13em) / 12 + 1em); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(3) { left: calc(1em + 2 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(4) { left: calc(1em + 3 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(5) { left: calc(1em + 4 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(6) { left: calc(1em + 5 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(7) { left: calc(1em + 6 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(8) { left: calc(1em + 7 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(9) { left: calc(1em + 8 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(10) { left: calc(1em + 9 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(11) { left: calc(1em + 10 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }
    .column-guide:nth-child(12) { left: calc(1em + 11 * ((100vw - 13em) / 12 + 1em)); width: calc((100vw - 13em) / 12); }

    /* 8 columns with 1em gutters - Tablet (768px - 1279px) */
    @media (max-width: 1279px) {
      .column-guide:nth-child(1) { left: 1em; width: calc((100vw - 9em) / 8); }
      .column-guide:nth-child(2) { left: calc(1em + (100vw - 9em) / 8 + 1em); width: calc((100vw - 9em) / 8); }
      .column-guide:nth-child(3) { left: calc(1em + 2 * ((100vw - 9em) / 8 + 1em)); width: calc((100vw - 9em) / 8); }
      .column-guide:nth-child(4) { left: calc(1em + 3 * ((100vw - 9em) / 8 + 1em)); width: calc((100vw - 9em) / 8); }
      .column-guide:nth-child(5) { left: calc(1em + 4 * ((100vw - 9em) / 8 + 1em)); width: calc((100vw - 9em) / 8); }
      .column-guide:nth-child(6) { left: calc(1em + 5 * ((100vw - 9em) / 8 + 1em)); width: calc((100vw - 9em) / 8); }
      .column-guide:nth-child(7) { left: calc(1em + 6 * ((100vw - 9em) / 8 + 1em)); width: calc((100vw - 9em) / 8); }
      .column-guide:nth-child(8) { left: calc(1em + 7 * ((100vw - 9em) / 8 + 1em)); width: calc((100vw - 9em) / 8); }
      .column-guide:nth-child(9), .column-guide:nth-child(10), .column-guide:nth-child(11), .column-guide:nth-child(12) { display: none; }
    }

    /* 6 rows with 1em gutters - Desktop/Tablet */
    .row-guide:nth-child(13) { top: 1em; height: calc((100vh - 7em) / 6); }
    .row-guide:nth-child(14) { top: calc(1em + (100vh - 7em) / 6 + 1em); height: calc((100vh - 7em) / 6); }
    .row-guide:nth-child(15) { top: calc(1em + 2 * ((100vh - 7em) / 6 + 1em)); height: calc((100vh - 7em) / 6); }
    .row-guide:nth-child(16) { top: calc(1em + 3 * ((100vh - 7em) / 6 + 1em)); height: calc((100vh - 7em) / 6); }
    .row-guide:nth-child(17) { top: calc(1em + 4 * ((100vh - 7em) / 6 + 1em)); height: calc((100vh - 7em) / 6); }
    .row-guide:nth-child(18) { top: calc(1em + 5 * ((100vh - 7em) / 6 + 1em)); height: calc((100vh - 7em) / 6); }

    /* 6 columns with thinner gutters - Mobile (480px and below) */
    @media (max-width: 480px) {
      .column-guide:nth-child(1) { left: 1em; width: calc((100vw - 2em - 1.25em) / 6); }
      .column-guide:nth-child(2) { left: calc(1em + (100vw - 2em - 1.25em) / 6 + 0.25em); width: calc((100vw - 2em - 1.25em) / 6); }
      .column-guide:nth-child(3) { left: calc(1em + 2 * ((100vw - 2em - 1.25em) / 6 + 0.25em)); width: calc((100vw - 2em - 1.25em) / 6); }
      .column-guide:nth-child(4) { left: calc(1em + 3 * ((100vw - 2em - 1.25em) / 6 + 0.25em)); width: calc((100vw - 2em - 1.25em) / 6); }
      .column-guide:nth-child(5) { left: calc(1em + 4 * ((100vw - 2em - 1.25em) / 6 + 0.25em)); width: calc((100vw - 2em - 1.25em) / 6); }
      .column-guide:nth-child(6) { left: calc(1em + 5 * ((100vw - 2em - 1.25em) / 6 + 0.25em)); width: calc((100vw - 2em - 1.25em) / 6); }
      .column-guide:nth-child(7), .column-guide:nth-child(8), .column-guide:nth-child(9), .column-guide:nth-child(10), .column-guide:nth-child(11), .column-guide:nth-child(12) { display: none; }
      
      /* 6 rows with thinner gutters - Mobile */
      .row-guide:nth-child(13) { top: 1em; height: calc((100vh - 2em - 1.25em) / 6); }
      .row-guide:nth-child(14) { top: calc(1em + (100vh - 2em - 1.25em) / 6 + 0.25em); height: calc((100vh - 2em - 1.25em) / 6); }
      .row-guide:nth-child(15) { top: calc(1em + 2 * ((100vh - 2em - 1.25em) / 6 + 0.25em)); height: calc((100vh - 2em - 1.25em) / 6); }
      .row-guide:nth-child(16) { top: calc(1em + 3 * ((100vh - 2em - 1.25em) / 6 + 0.25em)); height: calc((100vh - 2em - 1.25em) / 6); }
      .row-guide:nth-child(17) { top: calc(1em + 4 * ((100vh - 2em - 1.25em) / 6 + 0.25em)); height: calc((100vh - 2em - 1.25em) / 6); }
      .row-guide:nth-child(18) { top: calc(1em + 5 * ((100vh - 2em - 1.25em) / 6 + 0.25em)); height: calc((100vh - 2em - 1.25em) / 6); }
    }

    .cousin-draft-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000000;
      padding: 0.45rem 1rem;
      background: #1e40af;
      color: #fff;
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-align: center;
      pointer-events: none;
    }