.no-underline a {
	text-decoration: none;
}

.has-dropcap:first-letter {
	font-size: 3.05rem;
	float: left;
	margin: .05rem .5rem .2rem 0;
	line-height: .65;
	padding: .5rem;
}

.is-overlapping {
	position: relative;
	z-index: 1;
}

/* Left column: preview at top, text at bottom with space-between */
.homepageleftcolumn{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Ensure the hover preview block stays at the top */
.homepageleftcolumn #ak-hover-preview{ order: 0; }

:root .wp-block-post-featured-image img {
	filter: none !important;
}

.wp-block-post-featured-image img,
.wp-block-post-featured-image__placeholder,
.wp-block-post-featured-image .components-placeholder__illustration,
.wp-block-post-featured-image .components-placeholder::before {
	filter: none !important;
}

.wide-size {
	max-width: 1280px !important;
	margin: 0 auto;
	padding-left: 12px;
	padding-right: 12px;
}

.width100 {
	width: 100vw !important;
	margin: 0 !important;
	align-self: center;
}

.hide {
	display: none;
}

.width100 {
	width: 100vw !important;
	margin: 0 !important;
	align-self: center;
}
@font-face{font-family:"Brick Wall";font-style:normal;font-weight:400;font-display:fallback;src:url('https://ashtonkrow.com/wp-content/uploads/fonts/brick_wall_test_-_final-webfont.woff') format('woff');}
.brickwalltest {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 250px;
  font-family: 'Brick Wall' !important;
  font-size: 48px;
  padding: 20px;
  border: 2px solid #000;
  resize: vertical;
  box-shadow: 4px 4px 0 #000;
  background: #fff;
  color: #A92223;
  margin: 0 auto;
  line-height: 1.075;
  display: block;
}
.brickwall-container {
  width: 100%;
  max-width: 800px; /* or your desired limit */
  margin: 0 auto;
  padding: 0 2%;
  display: flex;
  justify-content: center;
  font-family: 'Brick Wall', Arial, sans-serif;
}
.no-underline a {
	text-decoration: none;
}

.has-dropcap:first-letter {
	font-size: 3.05rem;
	float: left;
	margin: .05rem .5rem .2rem 0;
	line-height: .65;
	padding: .5rem;
}

.is-overlapping {
	position: relative;
	z-index: 1;
}



:root .wp-block-post-featured-image img {
	filter: none !important;
}

.wp-block-post-featured-image img,
.wp-block-post-featured-image__placeholder,
.wp-block-post-featured-image .components-placeholder__illustration,
.wp-block-post-featured-image .components-placeholder::before {
	filter: none !important;
}

.wide-size {
	max-width: 1280px !important;
	margin: 0 auto;
	padding-left: 12px;
	padding-right: 12px;
}
.width670 {
  max-width: 670px !important;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
}
.width100 {
	width: 100vw !important;
	margin: 0 !important;
	align-self: center;
}

/* Scrollable feature code block */
.fea-wrap {
  max-height: 320px;                   /* vertical cap */
  overflow-y: auto;                    /* vertical scroll */
  overflow-x: hidden;                  /* no horizontal scroll */
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.45;
  scrollbar-gutter: stable;
  scrollbar-width: thin;               /* Firefox scrollbar */
  scrollbar-color: #444 #1e1e1e;
}

.fea-wrap pre {
  margin: 0;
  white-space: pre;                    /* preserve formatting */
}

.fea-wrap code {
  display: block;
}

/* Scrollbar styling (WebKit browsers) */
.fea-wrap::-webkit-scrollbar { width: 10px; }
.fea-wrap::-webkit-scrollbar-track { background: #1e1e1e; }
.fea-wrap::-webkit-scrollbar-thumb { background: #444; border-radius: 6px; }
.fea-wrap::-webkit-scrollbar-thumb:hover { background: #555; }

/* Syntax highlighting */
.fea-wrap .keyword { color: #569cd6; }   /* feature, sub, by, lookup */
.fea-wrap .alt     { color: #dcdcaa; }   /* alternates like .alt2 */
.fea-wrap .glyph   { color: #c586c0; }   /* glyph names */
.fea-wrap .comment { color: #6a9955; font-style: italic; }

.breakout {
  width: 100vw !important;        /* stretch to viewport width */
  max-width: 100vw !important;    /* ignore parent max-width */
  left: 50% !important;     
  margin-left: -50vw !important;  
  position: relative !important; 
}
.zbehind {
  z-index: 0 !important;
  position: relative;
}
.zmid {
  z-index: 5 !important;
  position: relative;
}
.zfront {
  z-index: 10 !important;
  position: relative;
}
html,
body {
  overflow-x: hidden;
}
.feathered-image {
  display: block;
  width: 100%;
  height: auto;

  /* Apply gradient mask for top & bottom feathering */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 33%,
    black 66%,
    transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 33%,
    black 66%,
    transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
@media (max-width: 768px) {
  .mmw95 {max-width: 85% !important}
}


/* Renders exactly where the HTML block sits (top of the column) */
#ak-hover-preview{
  position: relative;
  width: 90%;          /* ⟵ fills the column width */
  max-width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;

  /* collapsed when idle (no giant gap at top) */
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .12s ease-in-out;
}

#ak-hover-preview.is-visible{
  aspect-ratio: var(--ak-ratio, 16/9);
  height: auto;
  opacity: 1;
  margin-bottom: 16px;
}

#ak-hover-preview {
  margin-top: -24;
  margin-left: 0;
  align-self: start;        /* 'left' is invalid for align-self */
  max-height: 40vh;
}

/* Optional: hide on narrow screens */
@media (max-width:780px){ #ak-hover-preview{ display:none; } }
@media (prefers-reduced-motion:reduce){ #ak-hover-preview{ transition:none; } }
/* Only for the top blue notice bar */
/* Full-bleed specifically for the top notice bar */
.bannerbar{
  display:block;
  box-sizing:border-box;
  width:100vw;                 /* span viewport */
  max-width:none;
  position:relative;
  left:50%;
  transform:translateX(-50vw); /* escape centered wrapper without fighting its padding */
  margin:0;
  /* keep horizontal padding on the element itself at 0; use vertical padding only */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* More robust on mobile dynamic viewports */
@supports (width: 100dvw){
  .bannerbar{
    width:100dvw;
    transform:translateX(-50dvw);
  }
}


body.home.blog{overflow:hidden;}

body.home.blog .wp-site-blocks{
  height:100vh;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
}

body.home.blog.admin-bar .wp-site-blocks{
  height:calc(100vh - 32px);
  min-height:calc(100vh - 32px);
}

@media (max-width:782px){
  body.home.blog.admin-bar .wp-site-blocks{
    height:100vh;
    min-height:100vh;
  }
}

body.home.blog #wp--skip-link--target{
  min-height:0 !important;
  overflow:hidden;
}

body.home.blog .wp-block-columns.alignwide{
  height:100%;
}

/* Center the header wrapper and its inner "alignwide" group site-wide */
.wp-site-blocks > header.wp-block-template-part.alignwide,
.wp-site-blocks > header.wp-block-template-part .alignwide,
.wp-site-blocks > header.wp-block-template-part.wide-size,
.wp-site-blocks > header.wp-block-template-part .wide-size{
  box-sizing: border-box;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
}

/* allow the full-bleed strip to overflow its parent */
.cosm-strip-wrap{ overflow: visible !important; }

/* force THIS strip (and only this one) to span the viewport */
.cosm-strip{
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box;
  flex: 0 0 auto !important;      /* don't let flex shrink it */
  align-self: stretch !important;  /* take full cross-axis */
}

/* prefer dynamic viewport when available */
@supports (width:100dvw){
  .cosm-strip{
    width: 100dvw !important;
    margin-left: -50dvw !important;
    margin-right: -50dvw !important;
  }
}

/* make the TikTok embeds fill the strip */
.cosm-strip .wp-block-embed__wrapper,
.cosm-strip .tiktok-embed{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* remove side gaps from figures */
.cosm-strip figure.wp-block-embed{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ak-carousel{
  --gap: 16px;
  --slide-h: 420px;       /* default; overridden by data-height */
  --center-scale: 1.22;   /* overridden by data-center-scale */
  --side-scale: 0.82;     /* overridden by data-side-scale */
  --slide-radius: 10px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Viewport */
.akc-viewport{
  position: relative;
  overflow: visible;
}

/* Track */
.akc-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
}

.akc-slide{
  flex: 0 0 calc((100% - (var(--gap)*2)) / 3);
  transform: scale(var(--s, var(--side-scale)));
  opacity: var(--o, .75);
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
  z-index: 1;
}

.akc-slide img,
.akc-slide > a,
.akc-slide > figure,
.akc-slide > div{
  display: block;
  width: 100%;
  height: var(--slide-h);
  object-fit: contain;     /* <— was cover */
  border-radius: var(--slide-radius);
  box-shadow: var(--shadow);
  background: transparent; /* or #fff if you prefer */
}

.akc-slide.is-center{
  --s: var(--center-scale);
  --o: 1;
  z-index: 2;
}

/* Pause on hover/focus (optional visual cue via cursor only) */
.ak-carousel:hover .akc-viewport{ cursor: pointer; }

/* Respect reduced motion: hold position (no auto-scroll) */
@media (prefers-reduced-motion: reduce){
  .ak-carousel { --pause: 1; }
}

/* Let breakouts overflow their parent */
.wp-block-group.is-layout-constrained:has(> .breakout.width100){
  overflow-y: visible;
  overflow-x: hidden;
  border: 0 1px solid #0066bb;
}

/* Kill the Group’s padding/background just for this strip */
.ak-nopad{
  background: transparent !important;
}

/* Carousel: no bullets, no component background */
.ak-carousel .akc-track{ list-style: none; margin: 0; padding: 0; }
.ak-carousel, .ak-carousel .akc-viewport{ background: transparent !important; }

/* Clean slides (no bg/shadow/radius) */
.ak-clean .akc-slide img,
.ak-clean .akc-slide > a,
.ak-clean .akc-slide > figure,
.ak-clean .akc-slide > div{
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Carousel should fill the breakout width */
.breakout.width100 .ak-carousel,
.breakout.width100 .ak-carousel .akc-viewport{
  width: 100%;
}

/* Clean look for slides (no bg/shadow/radius) when you use .ak-clean */
.ak-clean .akc-slide img,
.ak-clean .akc-slide > a,
.ak-clean .akc-slide > figure,
.ak-clean .akc-slide > div{
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ---------- Lightbox (popup) ---------- */
.ak-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;             /* toggled via .is-open */
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.ak-lightbox.is-open{ display:flex; }

.ak-lightbox__img{
  max-width: min(96vw, 1800px);
  max-height: 92vh;
  user-select: none;
  cursor: grab;
  will-change: transform;
  transform: translate(var(--x, 0px), var(--y, 0px));
}

/* Close button */
.ak-lightbox__close{
  position: fixed;
  top: 10px;
  right: 12px;
  width: 40px; height: 40px;
  border: 0; border-radius: 20px;
  background: rgba(255,255,255,.15);
  color: #fff; font-size: 26px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}
.ak-lightbox__close:hover{ background: rgba(255,255,255,.25); }

/* Track formatting */
.ak-carousel .akc-track{ list-style:none; margin:0; padding:0; }

/* 3-up layout */
.akc-viewport{ position:relative; overflow:hidden; }
.akc-track{ display:flex; align-items:center; gap:var(--gap); will-change:transform; }
.akc-slide{
  flex: 0 0 calc((100% - (var(--gap)*2)) / 3);
  transform: scale(var(--s, var(--side-scale, .9)));
  opacity: var(--o, .75);
  transition: transform .35s ease, opacity .35s ease;
  z-index: 1;
}
.akc-slide.is-center{ --s: var(--center-scale, 1.5); --o:1; z-index:2; }

/* No cropping + adjustable height via --slide-h (or auto if unset) */
.akc-slide img, .akc-slide > a, .akc-slide > figure, .akc-slide > div{
  display:block;
  width:100%;
  height: var(--slide-h, auto);
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Clean skin toggle */
.ak-clean .akc-slide img,
.ak-clean .akc-slide > a,
.ak-clean .akc-slide > figure,
.ak-clean .akc-slide > div{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.overflowshow {overflow: visible !important;}

.ak-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:99999; }
.ak-lightbox.is-open{ display:flex; }
.ak-lightbox__img{ max-width:min(96vw,1800px); max-height:92vh; user-select:none; cursor:grab; will-change:transform; transform:translate(var(--x,0px),var(--y,0px)); }
.ak-lightbox__close{ position:fixed; top:10px; right:12px; width:40px; height:40px; border:0; border-radius:20px; background:rgba(255,255,255,.15); color:#fff; font-size:26px; display:grid; place-items:center; cursor:pointer; }
.ak-lightbox__close:hover{ background:rgba(255,255,255,.25); }
/* Hover should grow just like the center slide */
.akc-slide:hover{
  --s: var(--center-scale, 1.5);
  --o: 1;
  z-index: 3;              /* make sure it sits on top while enlarged */
}
/* Caption overlay inside the carousel viewport (no background) */
.akc-viewport{ position: relative; }
.akc-caption{
  position: absolute;
  inset: auto 0 0 0;   /* bottom:0; left/right:0 */
  text-align: center;
  padding: .5rem .75rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  transition: opacity .2s ease;
}
.akc-caption.is-visible{ opacity: 1; }

/* Title text sizing */
.akc-caption__title{
  font-weight: 600;
  font-size: clamp(14px, 2.2vw, 22px);
  line-height: 1.2;
}
/* Optional: smoother hover-in/out */
.akc-slide{ transition: transform .35s ease, opacity .35s ease; }
.wp-container-core-group-is-layout-244ae00e {
  overflow: visible !important;
}
.maxwidth950 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 950px !important;
  margin: 0 auto !important;
}


#illusionApp {
  font-family: sans-serif;
  color: white;
}

.pageforlightgame {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  padding: 2rem;
  background-color: black;
}

#testPage {
  background-color: #222;
}

.center-light {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: #111;
  border: 4px solid #333;
  transition: background-color 0.1s ease, box-shadow 0.1s ease;
  margin-bottom: 3rem;
}

.center-light.active {
  background-color: yellow;
  box-shadow: 0 0 40px yellow;
}

.main-btn {
  font-size: 1.1rem;
  padding: 1rem 2rem;
  background-color: #444;
  border: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.2s ease;
}

.main-btn.hover,
.main-btn:focus {
  background-color: #666;
}

.main-btn.clicked {
  transform: scale(0.95);
}

.nav {
  position: absolute;
  top: 50%;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
  color: white;
  transform: translateY(-50%);
  padding: 0.5rem;
}

.nav.left {
  left: 1rem;
}

.nav.right {
  right: 1rem;
}

.nav.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Popup styling */
.popup {
  position: absolute;
  bottom: 2rem;
  background-color: #333;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  max-width: 400px;
  text-align: center;
  z-index: 10;
}

.popup.hidden {
  display: none;
}

#popupTab {
  position: fixed;
  bottom: 0;
  background: #333;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#popupTab.hidden {
  display: none;
}

/* RPS game styles */
.rps-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.rps-btn {
  font-size: 3rem;
  cursor: pointer;
  transition: transform 0.1s ease;
  user-select: none;
}

.rps-btn.clicked {
  transform: scale(0.9);
}

.rps-btn:active {
  transform: scale(0.85);
}
.ak-fader {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 16/9;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 !important;
}
.ak-frame-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: black; /* Optional for behind-image framing */
}

.ak-framed-image {
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}

/* Frame Bar — Shared */
.ak-frame-top,
.ak-frame-bottom {
  width: 100%;
  height: 56px; /* Adjust height here */
  background: linear-gradient(
    to bottom,
    #2b2b2b 0%,
    #111 25%,
    #000 50%,
    #222 75%,
    #2b2b2b 100%
  );
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.15),
    inset 0 -2px 6px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.4);
  border-top: 1px solid #444;
  border-bottom: 1px solid #111;
  z-index: 2;
}

/* Optional: make top/bottom have different gloss orientations */
.ak-frame-top {
  background: linear-gradient(
    to bottom,
    #444 0%,
    #111 40%,
    #000 70%,
    #222 90%,
    #333 100%
  );
}

.ak-frame-bottom {
  background: linear-gradient(
    to top,
    #444 0%,
    #111 40%,
    #000 70%,
    #222 90%,
    #333 100%
  );
}
.ak-fader img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}

.ak-fader img.is-visible {
  opacity: 1;
  z-index: 1;
}
.maxheight80 {max-height: 80px;}

.ak-caption-title {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: opacity 0.5s ease;
  position: relative;
  z-index: 3;
  margin-top: -90px;
}

.flipbox-wrapper {
  perspective: 1200px;
  width: 100%;
  max-width: 800px;
  margin: auto;
}

.flipbox {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flipbox-wrapper:hover .flipbox {
  transform: rotateY(180deg);
}

.flipbox-front,
.flipbox-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  border: none;
  border-radius: 0px;
}

.flipbox-front img,
.flipbox-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.flipbox-back {
  transform: rotateY(180deg);
}

.artemisimginsidebox img {
  border: 1px solid #0066bb;
  margin-top: 12px;
  margin-left: -48px;
  margin-right: -48px;
  margin-bottom: 12px;
}

.wp-block-jetpack-slideshow_pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  width: 100% !important;
  margin-top: 1rem;
}

  body.home .wp-site-blocks > header.wp-block-template-part.alignwide,
  body.home .wp-site-blocks > header.wp-block-template-part .alignwide,
  body.home .wp-site-blocks > header.wp-block-template-part.wide-size,
  body.home .wp-site-blocks > header.wp-block-template-part .wide-size {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


.has-global-padding-important {
    padding-right: var(--wp--style--root--padding-right) !important;
    padding-left: var(--wp--style--root--padding-left) !important;
}

.wp-site-blocks > header.wp-block-template-part > *:not(.alignfull):not(.alignwide):not(.bannerbar) {
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

body .wp-site-blocks > header.wp-block-template-part .wp-block-columns.wp-container-core-columns-is-layout-3969fd1c {
  padding-left: var(--wp--style--root--padding-left) !important;
  padding-right: var(--wp--style--root--padding-right) !important;
}