@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;300;400;500;700;800&display=swap');

/**
 * Content
 */

body {
	background-color: #000000;
	color: #000;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: .4;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.3;	
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.9rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.6);
	font-family: "Space Grotesk", Icons;
	font-style: normal;
	line-height: 1.4;
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(255, 255, 255, 0.6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Space Grotesk", Icons;
	font-style: normal;
	font-weight: 700;
	padding: 0;
	margin: 0;
	font-size: 5.0rem;
	line-height: 1.1;
	color: #ff6300;
	}

[data-predefined-style="true"] h1 a {
	color: rgba(255, 255, 255, 0.75);
    bordeR: none;
}

[data-predefined-style="true"] h2 {
	font-family: "Space Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 2rem;
	line-height: 1.2;
	}

[data-predefined-style="true"] h2 a {
	color: rgba(255, 255, 255, 0.75);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.3;
	font-family: "Space Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.35);
    letter-spacing: .05rem;
}

[data-predefined-style="true"] small a {
	color: rgba(255, 255, 255, 0.6);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: 0 /*!content_left*/;
	margin-right: auto /*!content_left*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: #1e1e1e/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100%/*!content_left*/;
}

[data-css-preset] .content_padding {
	padding-top: 5rem /*!main_margin*/;
	padding-bottom: 5rem /*!main_margin*/;
	padding-left: 5rem /*!main_margin*/;
	padding-right: 5rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 65rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: transparent/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 2.5rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -5rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.8rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1.6rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 1px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 2.0rem;
    margin-bottom: .3rem;
    font-size: 1.9rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
	font-family: Rubik, Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.25);
	font-family: 'Space Mono', Icons;
	font-style: normal;
	line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .05rem;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(255, 255, 255, 0.25);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: 1rem /*!site_menu_button*/;
	right: 1rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(255, 255, 255, 1);
    background: transparent;
	font-size: 34px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 1rem /*!shop_button*/;
	right: 1rem /*!shop_button*/;
}

#shop_button.text {
    font-size: 1.4rem;
	line-height: 1.3;
	font-family: "Space Mono", Icons;
	font-style: normal;
	font-weight: 400;
    padding: 0;
    line-height: 1.2;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}


body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 38px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: "Space Mono", Icons;
    font-size: 1.4rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .dropdown {
    font-family: "Space Mono", Icons;
    font-size: 1.4rem;
    color: rgba(0, 0, 0, 0.9);
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(255,255,255,.4);
    background:  #ffffff url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2rem .7rem 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .button {
    font-family: "Space Mono", Icons;
	font-size: 1.4rem;
    background: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
	font-style: normal;
	font-weight: 400;
    border-bottom: none;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.85) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin:3.5rem 0;
    text-align: center;
    font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: white;
}



/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}


/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.4);
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.14);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(255, 255, 255, 0.85);
}

.audio-player .icon {
    fill: rgba(255, 255, 255, 0.75);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(255, 255, 255, 0.05);
}

.audio-player .progress {
    background: rgba(255, 255, 255, 0.09);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(255, 255, 255, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(255, 255, 255, 0.6);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}




/* ============================================================================
   SYSTEM CONTROL — Mission-Control FUI theme for johnalmazan.com
   FILE 1 of 3  ·  PASTE INTO: Cargo → Site Settings → "</>" (Code) → CSS tab
   ----------------------------------------------------------------------------
   Every selector below was read off your live Cargo 3 markup, so these are
   your actual class names — not guesses. The structure this targets is:

     body.homepage
       .main_container > .content_container
         .page_container > .page.container.container_width
           bodycopy.bodycopy.content
       .pinned.pinned_top          <- HOME / PROJECTS / ABOUT bar
       #site_menu_wrapper          <- hamburger menu
       .thumbnails
         div[thumbnails="grid"]
           .thumbnail.has_title
             a.image-link > .thumb_image > img
             a.image-link > .title > span
             .tags > a
       .backdrop                   <- animated polygon canvas
   ========================================================================== */

/* ---------------------------------------------------------------- 1. FONT */

/* -------------------------------------------------------------- 2. TOKENS */
:root{
  --gc-bg:#070A0D;
  --gc-bg-2:#0A0F14;
  --gc-panel:#0B1116;
  --gc-panel-2:#0D141A;

  --gc-orange:#E8552F;      /* body copy */
  --gc-orange-hi:#FF7043;
  --gc-amber:#F5B841;       /* headings, primary readouts */
  --gc-amber-hi:#FFCE5C;
  --gc-cyan:#7FE0D4;        /* secondary / status */
  --gc-red:#FF3B2F;         /* alert + hover state */
  --gc-red-hi:#FF6257;

  --gc-grid:rgba(232,85,47,.10);
  --gc-grid-strong:rgba(232,85,47,.22);
  --gc-hair:rgba(232,85,47,.38);

  /* ── ONE KNOB FOR OVERALL SIZE ────────────────────────────────────────
     Every type size, rail width and bar height below is derived from this
     multiplier, so this is the only number to touch.
       1     = original density
       1.25  = current default — the "150% zoom" feel you asked for
       1.5   = larger again
     ─────────────────────────────────────────────────────────────────── */
  --gc-ui-scale:1.25;

  --gc-t-xs:calc(9px  * var(--gc-ui-scale));
  --gc-t-sm:calc(10px * var(--gc-ui-scale));
  --gc-t-md:calc(11px * var(--gc-ui-scale));
  --gc-t-lg:calc(13px * var(--gc-ui-scale));

  /* Chrome sizing — the injected rails/bars read these. Change here only. */
  --gc-rail-l:calc(212px * var(--gc-ui-scale));
  --gc-rail-r:calc(250px * var(--gc-ui-scale));
  --gc-bar-h:calc(34px  * var(--gc-ui-scale));

  --gc-ease:cubic-bezier(.22,.61,.36,1);
}

/* The scale steps back down as the window narrows, so a smaller laptop — or a
   browser already sitting at 150% zoom — keeps the three-column console instead
   of collapsing to the stacked mobile layout. */
@media(max-width:1500px){ :root{ --gc-ui-scale:1.12; } }
@media(max-width:1240px){ :root{ --gc-ui-scale:1;    } }

/* On narrow screens the rails collapse, so the content inset goes to zero. */
@media(max-width:1080px){
  :root{ --gc-rail-l:0px; --gc-rail-r:0px; }
}

/* ------------------------------------------------------- 3. GLOBAL RESET */
html{ background:var(--gc-bg); }

body{
  background:
    linear-gradient(var(--gc-grid) 1px,transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg,var(--gc-grid) 1px,transparent 1px) 0 0/44px 100%,
    var(--gc-bg-2) !important;
  color:var(--gc-orange) !important;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace !important;
  font-weight:400;
  letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}

/* Make room for the injected chrome. */
body{
  padding:calc(var(--gc-bar-h) + 10px) calc(var(--gc-rail-r) + 14px)
          calc(var(--gc-bar-h) + 24px) calc(var(--gc-rail-l) + 14px) !important;
  box-sizing:border-box;
}

/* Your Cargo wrappers — real class names, all of them transparent so the
   console grid on <body> shows through. */
.main_container, .content_container,
.page_container, .page, .container, .container_width,
bodycopy, .bodycopy, .content, .page_content{
  background:transparent !important;
  max-width:none !important;
  width:auto !important;
}
.page_background{ background:transparent !important; }

/* Cargo's animated polygon backdrop fights the scanline grid. Off by default —
   delete this rule if you'd rather keep it. */
.backdrop, canvas.canvas_polygon_engine{ display:none !important; }

/* Your theme sets .page{min-height:100vh} — keep that, it's fine here. */

/* ---------------------------------------------------- 4. TYPE / BODYCOPY */
bodycopy, bodycopy p, .page p{
  font-family:'JetBrains Mono',monospace !important;
  font-size:var(--gc-t-lg) !important;
  font-weight:300 !important;
  line-height:1.95 !important;
  letter-spacing:.05em !important;
  color:var(--gc-orange) !important;
  max-width:78ch;
}

/* Your index H1 is "JOHN  ALMAZAN" and each project H1 is the project name. */
bodycopy h1, .page h1{
  font-family:'JetBrains Mono',monospace !important;
  font-size:clamp(30px,6vw,74px) !important;
  font-weight:800 !important;
  line-height:.94 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  color:var(--gc-amber) !important;
  text-shadow:0 0 30px rgba(245,184,65,.24);
  margin:0 0 12px !important;
}

/* Your H2 carries the role line — "Game Director + Interactive Art Director",
   "GAME DIRECTION / UEFN DEVELOPMENT / INTERACTIVE CAMPAIGN", the About bio. */
bodycopy h2, .page h2{
  font-family:'JetBrains Mono',monospace !important;
  font-size:clamp(15px,1.7vw,20px) !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--gc-cyan) !important;
}
bodycopy h2 b, .page h2 b{ font-weight:400 !important; }

bodycopy h3, .page h3{
  font-size:var(--gc-t-lg) !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--gc-amber) !important;
}

bodycopy small, .caption, figcaption{
  font-size:var(--gc-t-xs) !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  color:rgba(232,85,47,.55) !important;
}

/* --------------------------------------------------------------- 5. LINKS */
a, bodycopy a{
  color:var(--gc-cyan) !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(127,224,212,.35);
  transition:color .16s,border-color .16s,background .16s;
}
a:hover, bodycopy a:hover{
  color:var(--gc-red) !important;
  border-bottom-color:var(--gc-red);
  background:rgba(255,59,47,.08);
}
/* thumbnails and menu links are structural, not prose — no underline */
.thumbnail a, #site_menu a, .pinned a, .gc-sat{ border-bottom:none !important; }

/* ---------------------------------------------------- 6. SITE NAVIGATION */
/* Your site has two navs: the pinned top bar (HOME / PROJECTS / ABOUT) and the
   top-right hamburger. The injected chrome supplies both jobs — a fixed top bar
   with the same links and a left PROJ LIST rail with every project — so both
   originals are hidden to avoid doubling up.
   Want to keep Cargo's hamburger instead? Delete the #site_menu_wrapper line
   and set --gc-rail-l to 0px in the tokens above. */
.pinned.pinned_top{ display:none !important; }
#site_menu_wrapper{ display:none !important; }

/* The pinned bottom bar sits where the injected status bar goes. */
.pinned.pinned_bottom{ display:none !important; }

/* ------------------------------------------- 7. THUMBNAILS = PROJ ASSETS */
/* The heart of the redesign: every project thumbnail becomes a tracked-asset
   panel, locked to 16:9, that flips ONLINE → ENHANCE SIGNAL on hover. */

.thumbnails{ background:transparent !important; }

/* NOTE: don't add `gap` to div[thumbnails="grid"]. Cargo sizes columns as
   percentages and spaces them with its own `thumbnails-gutter` padding, so a
   flex gap steals width and drops you from 3 columns to 2. Change the spacing
   in Cargo's own Thumbnail settings instead. */

.thumbnail{
  border:1px solid var(--gc-hair) !important;
  background:var(--gc-panel-2) !important;
  position:relative;
  overflow:hidden;
  transition:border-color .18s, background .18s, transform .18s var(--gc-ease);
}

/* corner registration tick */
.thumbnail::after{
  content:'';position:absolute;right:0;bottom:0;
  width:10px;height:10px;
  border-right:1px solid var(--gc-amber);
  border-bottom:1px solid var(--gc-amber);
  opacity:.7;transition:.18s;pointer-events:none;z-index:3;
}

/* ONLINE tag, drawn in CSS so no HTML access is needed */
.thumbnail::before{
  content:'● ONLINE';
  position:absolute;top:0;left:0;right:0;z-index:3;
  padding:5px 8px;
  font-size:var(--gc-t-xs);letter-spacing:.16em;
  color:var(--gc-cyan);
  background:linear-gradient(rgba(11,17,22,.94),rgba(11,17,22,.72));
  border-bottom:1px solid var(--gc-hair);
  text-align:right;
  transition:.18s;pointer-events:none;
}

/* Every thumbnail frame is locked to 16:9 whatever the source crop is. Cargo
   holds a thumbnail's native ratio with bottom padding, so that's zeroed out
   and the image is stretched edge-to-edge inside the ratio box and cropped
   from the centre. Portrait and square uploads now sit in the grid without
   breaking the row rhythm. */
.thumbnail .thumb_image{
  position:relative;
  aspect-ratio:16/9;
  height:auto !important;
  padding:0 !important;
  overflow:hidden;
}
/* section 8 puts a hairline on every image inside bodycopy — thumbnails already
   have the panel border, so cancel it here to avoid a doubled edge. */
.thumbnail img{ border:none !important; }
.thumbnail .thumb_image img{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  filter:saturate(.62) contrast(1.12) brightness(.92) sepia(.18);
  transition:filter .22s;
  display:block;
}

/* the caption block inside the thumbnail link */
.thumbnail .title{
  font-family:'JetBrains Mono',monospace !important;
  padding:8px 9px 10px !important;
  font-size:var(--gc-t-lg) !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--gc-amber) !important;
  transition:color .18s;
}
.thumbnail .title span{ color:inherit !important; }

/* the tag row that sits below each thumbnail (GAME DIRECTION, UEFN, DESIGN…) */
.thumbnail .tags{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:0 9px 9px;
}
.thumbnail .tags a{
  border:1px solid var(--gc-hair);
  color:var(--gc-cyan) !important;
  font-size:var(--gc-t-xs);letter-spacing:.14em;
  text-transform:uppercase;
  padding:2px 6px;
  background:none !important;
}
.thumbnail .tags a:hover{ border-color:var(--gc-amber-hi);color:var(--gc-amber-hi) !important; }

/* ---- HOVER = ENHANCE SIGNAL --------------------------------------------- */
/* ENHANCE is the opposite of an alert, so this hover reads as a gain boost
   rather than a fault: the panel goes amber-hi, the tag goes cyan, a scan bar
   sweeps the frame, and the artwork comes UP out of its graded state to full
   colour instead of darkening. Red stays reserved for real faults. */
.thumbnail:hover{
  border-color:var(--gc-amber-hi) !important;
  background:#0D1418 !important;
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(127,224,212,.18), 0 6px 26px rgba(127,224,212,.10);
}
.thumbnail:hover::before{
  content:'◈ ENHANCE SIGNAL';
  color:var(--gc-cyan);
  border-bottom-color:var(--gc-amber-hi);
  text-shadow:0 0 12px rgba(127,224,212,.6);
}
.thumbnail:hover::after{ border-color:var(--gc-cyan); }
.thumbnail:hover .title{ color:var(--gc-amber-hi) !important; }
/* No hue-rotate here — it turns amber into magenta. Lift the grade instead. */
.thumbnail:hover .thumb_image img{
  filter:saturate(1) contrast(1.04) brightness(1.02) sepia(0);
}
/* faint gain tint across the frame */
.thumbnail .thumb_image::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(127,224,212,.10),rgba(245,184,65,.06));
  opacity:0;transition:opacity .18s;pointer-events:none;
}
.thumbnail:hover .thumb_image::after{ opacity:1; }
/* the bar that sweeps the frame while the signal is being enhanced */
.thumbnail .thumb_image::before{
  content:'';position:absolute;left:0;right:0;top:0;height:34%;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(127,224,212,.22),transparent);
  opacity:0;pointer-events:none;
}
.thumbnail:hover .thumb_image::before{
  opacity:1;animation:gcEnhSweep 1.15s var(--gc-ease) infinite;
}
@keyframes gcEnhSweep{ from{ transform:translateY(-120%) } to{ transform:translateY(320%) } }
@media(prefers-reduced-motion:reduce){
  .thumbnail:hover .thumb_image::before{ animation:none; }
}

/* Cargo's fade-in-on-scroll class on .thumb_image stays untouched — the
   transition above only adds to it. */

/* ---------------------------------------------- 8. IMAGES ON PROJECT PAGES */
/* Every image on a project page is locked to 16:9 and cropped from the centre,
   so a gallery of mixed crops reads as one consistent run of frames. Clicking
   one opens the full, uncropped file — that viewer lives in file 2.
   If you ever want a specific image left at its native ratio, give it the class
   `gc-native` in the page's HTML element and it opts out of both rules. */
bodycopy img, .page_content img{
  border:1px solid var(--gc-hair);
  filter:saturate(.72) contrast(1.06) brightness(.96);
  transition:filter .2s,border-color .2s;
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  object-fit:cover;
  cursor:zoom-in;
}
bodycopy img.gc-native, .page_content img.gc-native{
  aspect-ratio:auto;width:auto;object-fit:fill;
}
bodycopy img:hover, .page_content img:hover{
  filter:saturate(1) contrast(1) brightness(1);
  border-color:var(--gc-amber);
}
/* thumbnails live inside .page_content too, but they navigate rather than
   enlarge and their frame is already handled in section 7 */
.thumbnail img, .thumbnail .thumb_image img{ cursor:pointer !important; }
/* video and Spline embeds get the same frame, no grade */
bodycopy iframe, .page_content iframe{
  border:1px solid var(--gc-hair) !important;
  background:var(--gc-panel);
}

/* Cargo's quick-view / lightbox overlay */
#following-overlay, .loading{ background:rgba(7,10,13,.92) !important; }
.loading_animation, .loading_animation.pulsing{ filter:hue-rotate(150deg) saturate(.7); }

/* --------------------------------------------------------- 9. FORM / MISC */
input, textarea, button, select{
  font-family:'JetBrains Mono',monospace !important;
  background:var(--gc-panel) !important;
  border:1px solid var(--gc-hair) !important;
  color:var(--gc-amber) !important;
  font-size:var(--gc-t-md) !important;
  letter-spacing:.14em;
  border-radius:0 !important;
  padding:7px 9px;
}
input:focus, textarea:focus{ outline:1px solid var(--gc-amber) !important; }
button:hover{ background:var(--gc-red) !important; color:#0a0a0a !important; cursor:pointer; }

hr{ border:none;border-top:1px solid var(--gc-hair);margin:26px 0; }

::selection{ background:var(--gc-red); color:#0a0a0a; }

/* thin console scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--gc-hair) transparent; }
::-webkit-scrollbar{ width:7px;height:7px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--gc-hair); }

/* Cargo's own UI bits that clash with the theme */
#shop_button, #cargo-badge, .cargo_badge{ filter:invert(1) hue-rotate(180deg); }

/* ---------------------------------------------- INSTALL FIX A: content width */
/* Cargo's .content is a flex item with flex:1 0 auto. The theme's
   width:auto !important let it size to max-content, and the wrapped
   thumbnail grid then measured its columns off that runaway width.
   Pin the content box back to its container. */
.container > .content,
.content_container > .content,
.thumbnails .content,
.page .content {
	width: 100% !important;
	max-width: 100% !important;
}


/* ---------------------------------------------- INSTALL FIX B: reveal images */
/* Cargo fades media in with .scroll-transition-fade / .below-viewport,
   driven by its own scroll observer. The fixed-chrome layout stops that
   observer from firing, so thumbnails stayed at opacity 0. Show them. */
.scroll-transition-fade,
.scroll-transition-fade.below-viewport,
.scroll-transition-fade.above-viewport,
[data-scroll-transition] {
	opacity: 1 !important;
	transform: none !important;
}


/* =====================================================================
   INSTALL FIX D — prototype hero, asset cards, unclipped video embeds
   ===================================================================== */

/* ---------- hero ---------- */
.gc-eyebrow{
  display:flex; gap:12px; align-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--gc-t-xs); color:var(--gc-cyan);
  letter-spacing:.3em; text-transform:uppercase; margin:0 0 16px;
}
.gc-eyebrow::after{ content:''; flex:1; height:1px; background:rgba(127,224,212,.4); }

h1.gc-h1{
  font-family:'JetBrains Mono',monospace !important;
  font-size:clamp(34px,7.4vw,86px) !important;
  font-weight:800 !important; letter-spacing:.05em !important;
  line-height:.94 !important; text-transform:uppercase !important;
  color:var(--gc-amber) !important;
  text-shadow:0 0 30px rgba(245,184,65,.28);
  margin:0 0 14px !important; padding:0 !important;
}
h1.gc-h1 .thin{ display:block; font-weight:200; color:var(--gc-orange); }
h1.gc-h1 .thick{ display:block; color:var(--gc-amber); }

h2.gc-sub{
  font-family:'JetBrains Mono',monospace !important;
  font-size:var(--gc-t-lg) !important; font-weight:300 !important;
  color:var(--gc-orange) !important; max-width:62ch;
  line-height:1.85 !important; letter-spacing:.1em !important;
  text-transform:none !important; margin:0 !important; text-align:left !important;
}

/* the role + base line holds on one line above the bio; it only gives way and
   wraps once the window is too narrow to carry the full string. */
h2.gc-sub .gc-role{ display:block; white-space:nowrap; }
@media(max-width:640px){ h2.gc-sub .gc-role{ white-space:normal; } }

.gc-meta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.gc-meta span{
  font-family:'JetBrains Mono',monospace;
  border:1px solid var(--gc-hair); padding:3px 9px;
  font-size:var(--gc-t-xs); letter-spacing:.14em; color:var(--gc-orange);
}

/* homepage hero block sits left, not centred */
body.homepage .gc-eyebrow, body.homepage h1.gc-h1,
body.homepage h2.gc-sub, body.homepage .gc-meta{ text-align:left; }

/* ---------- section header above the grid ---------- */
.gc-sech{
  display:flex; align-items:center; gap:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--gc-t-sm); color:var(--gc-amber);
  letter-spacing:.24em; text-transform:uppercase;
  padding:0 0 12px; margin:34px 0 20px;
  border-bottom:1px solid var(--gc-hair);
  position:relative; z-index:3;
}
.gc-sech::after{ content:''; flex:1; height:1px; background:var(--gc-hair); }
.gc-sech .n{ color:rgba(232,85,47,.55); }

/* ---------- asset cards ---------- */
/* the injected header replaces the old ::before status strip */
.thumbnail::before{ content:none !important; }
.gc-ah{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono',monospace;
  padding:5px 8px; font-size:var(--gc-t-xs); letter-spacing:.16em;
  border-bottom:1px solid var(--gc-hair);
  color:var(--gc-amber); transition:.18s;
  position:relative; z-index:3;
}
.gc-ah .gc-ah-st{ color:var(--gc-cyan); }
.gc-ah b{ font-weight:400; letter-spacing:.1em; }
.gc-ah .lost{ display:none; }
.thumbnail:hover .gc-ah{ border-bottom-color:var(--gc-amber-hi); color:var(--gc-amber-hi); }
.thumbnail:hover .gc-ah .ok{ display:none; }
.thumbnail:hover .gc-ah .lost{ display:inline; text-shadow:0 0 12px rgba(127,224,212,.6); }
.gc-arch .gc-ah .ok{ color:var(--gc-orange); }
.gc-arch{ border-style:dashed !important; }

/* the prototype card carries spec rows, not tag chips */
.thumbnail .tags{ display:none !important; }
.thumbnail .title{ margin:0 !important; padding:8px 9px 6px !important; }
.gc-rows{ display:grid; gap:1px; padding:0 9px 10px; }
.gc-crow{
  display:flex; justify-content:space-between; gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--gc-t-xs); line-height:1.95; letter-spacing:.12em;
  color:var(--gc-orange); text-transform:uppercase;
}
.gc-crow b{ font-weight:400; color:rgba(232,85,47,.62); }
.gc-crow span{ color:var(--gc-amber); text-align:right; }
.gc-crow.hl span{ background:var(--gc-amber); color:#0a0a0a; padding:0 4px; font-weight:700; }
.thumbnail:hover .gc-crow b{ color:rgba(127,224,212,.55); }
.thumbnail:hover .gc-crow span{ color:var(--gc-cyan); background:none; }
.thumbnail:hover .gc-crow.hl span{ background:var(--gc-cyan); color:#06100F; }

/* ---------- video embeds are never cropped or clipped ---------- */
.gc-embed{
  position:relative; display:block; width:100%;
  aspect-ratio:16/9; overflow:visible;
  border:1px solid var(--gc-hair); background:#000;
  margin:0 0 6px;
}
.gc-embed > iframe{
  position:absolute !important; top:0; left:0;
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  aspect-ratio:auto !important; object-fit:contain !important;
  border:0 !important; display:block;
}
bodycopy iframe, .page iframe{
  max-width:100% !important; aspect-ratio:auto !important;
  object-fit:contain !important;
}
/* an embed must never be cropped by the 16:9 image rules or clipped by a parent */
.gc-embed, .gc-embed *, bodycopy iframe, .page iframe{ clip-path:none !important; }

/* ---------- grid density: the prototype's auto-fill card grid ----------
   Cargo sizes its thumbnail columns with inline percentage widths, so the
   wrapper is converted to a real CSS grid and those inline widths are
   overridden. Revert by deleting this block. */
[thumbnails][grid-row]{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important;
  gap:14px !important;
  margin:0 !important;
}
[thumbnails][grid-row] .thumbnail{
  width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
}
[thumbnails][grid-row] [thumbnails-pad]{ padding:0 !important; }
[thumbnails][grid-row][thumbnails-pad]{ padding:0 !important; }


/* ============================================================================
   INSTALL FIX E — PROJECT PAYLOAD VIEW
   Dresses each project page as the prototype's REMOTE ACCESS / PAYLOAD VIEW:
   a cyan kicker, an amber name lockup, the cyan subname, a full-width spec
   strip, numbered section rules, and a right rail that swaps site telemetry
   for this unit's own readouts. Everything is driven by classes the script in
   the Custom HTML adds, so the page content itself is never rewritten.
   ========================================================================== */

/* --- the header row: title column out, single full-width column in -------- */
/* Cargo sets the project title in a narrow column beside the intro copy. The
   injected header replaces that column, so the row collapses to one stack.
   Only the row holding the title is touched — image pairs stay as rows. */
.gc-hcol{ display:none !important; }
.gc-hrow{ display:block !important; }
.gc-hrow > [grid-col]{
  width:100% !important; max-width:100% !important;
  float:none !important; margin-left:0 !important;
}
.gc-hrow > [grid-col]:not(.gc-hcol){ max-width:78ch !important; }

/* --- payload header ------------------------------------------------------- */
.gc-payhd{ margin:0 0 24px; text-align:left; }
.gc-kick{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--gc-t-xs); letter-spacing:.3em; text-transform:uppercase;
  color:var(--gc-cyan); margin:0 0 14px;
}
h2.gc-pname{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:clamp(26px,4vw,46px) !important;
  font-weight:800 !important; line-height:1 !important;
  letter-spacing:.05em !important; text-transform:uppercase !important;
  color:var(--gc-amber) !important; text-align:left !important;
  margin:0 0 7px !important; padding:0 !important;
  text-shadow:0 0 26px rgba(245,184,65,.26);
}
.gc-psub{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--gc-t-md); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gc-cyan); margin:0 0 18px;
}

/* the spec strip — one cell per field, hairlines showing through the gaps */
.gc-pmeta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px; background:var(--gc-hair);
  border:1px solid var(--gc-hair);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  text-transform:uppercase;
}
.gc-pmeta > div{ background:var(--gc-panel-2); padding:9px 11px; }
.gc-pmeta b{
  display:block; font-weight:400; font-size:var(--gc-t-xs);
  letter-spacing:.16em; color:rgba(232,85,47,.55); margin-bottom:4px;
}
.gc-pmeta span{
  display:block; font-size:var(--gc-t-md); line-height:1.5;
  letter-spacing:.1em; color:var(--gc-amber);
}
.gc-pmeta > div.cy span{ color:var(--gc-cyan); }

/* --- numbered section rules ---------------------------------------------- */
.gc-psech{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--gc-t-xs); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gc-cyan);
  border-bottom:1px solid var(--gc-hair);
  padding-bottom:6px; margin:36px 0 16px;
}
.gc-psech span:last-child{ color:rgba(232,85,47,.6); letter-spacing:.2em; }

/* --- right rail: this unit's readouts replace the site telemetry ---------- */
html.gc-proj #gc-chrome .gc-rail.r > *:not(#gc-pay){ display:none !important; }
#gc-pay > .gc-ph:first-child{ border-top:none; }
#gc-pay a.gc-row{ text-decoration:none; }
#gc-pay a.gc-row:hover b{ color:var(--gc-amber); }
#gc-pay a.gc-row:hover span{ color:var(--gc-cyan); }

/* The disconnect chip mirrors the prototype's red close control. Cargo's link
   reset (#gc-chrome a) drops the bottom border and forces the background off,
   which left the chip reading as a tab with no fill — both are put back here so
   it is a closed outlined rectangle that goes solid red on hover. */
#gc-chrome a.gc-tag{
  border:1px solid var(--gc-amber) !important;
}
#gc-chrome a.gc-tag:hover{
  background:var(--gc-amber) !important;
  color:#0a0a0a !important;
}
#gc-chrome a.gc-tag.gc-dis{
  border-color:var(--gc-red) !important;
  color:var(--gc-red) !important;
}
#gc-chrome a.gc-tag.gc-dis:hover{
  background:var(--gc-red) !important;
  border-color:var(--gc-red) !important;
  color:#0a0a0a !important;
}

/* With STATUS: ONLINE gone the chip is pulled out of the clock group and hung
   on the right edge of the middle column, so it lines up with the content
   inset rather than floating between the two readouts. */
@media(min-width:1081px){
  #gc-chrome .gc-bar.top a.gc-tag.gc-dis{
    position:absolute;
    top:50%;
    right:calc(var(--gc-rail-r) + 14px);
    transform:translateY(-50%);
  }
}


/* ==========================================================================
   INSTALL FIX F - GALLERY IMAGE ASPECT RATIO
   Cargo sizes every gallery cell with an INLINE padding-bottom equal to the
   image true aspect ratio (e.g. 155.66% for the 848x1320 Forza posters) and
   uses that reserved box for lazy loading. The HUD rule that forces
   aspect-ratio:16/9 on .page_content img left tall / vertical images sitting
   short inside a much taller box, which produced the large empty vertical
   gaps on Forza Motorsport 8.
   Fix: keep Cargo aspect box (correct height, no layout shift) and let the
   image fill it edge to edge instead of being re-cropped to 16:9. Because
   the box already matches the artwork ratio nothing is cropped - vertical
   posters simply render as full, correctly proportioned thumbnails.
   Stylesheet !important beats Cargo inline style / element resizer.
   ========================================================================== */
.gallery_card_image{
  position: relative;
  overflow: hidden;
}
.image-gallery .gallery_card_image img,
.gallery_card_image img{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
}