/*
* LittleLink
* https://littlelink.io
* Free to use under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/

/* Grid
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .container {
	position:relative;
	width:100%;
	max-width:37.5rem;     				/* 600px */
    text-align:center;
	margin:0 auto;
	padding:var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);
	box-sizing:border-box;
}
.container-left {
	position:relative;
	width:100%;
	max-width:37.5rem;
	text-align:left;
	margin:0 auto;
	padding:0 1.25rem;
	box-sizing:border-box;
}
.container-left p {
	margin-bottom: 1rem;  				/* 16px space between paragraphs */
  }
.column {
	width:100%;
	box-sizing:border-box;
}
.profile-container {
	max-width:76rem;
}
.profile-banner-frame {
	margin:0 auto calc(var(--spacing-xxl) - 6.42%);
}
.profile-banner {
	display:block;
	width:100%;
	height:auto;
	margin:0;
}
/* For devices larger than 400px */
  @media (min-width:25rem) {            /* 400px */
    .container {
	width:85%;
}
}/* For devices larger than 550px */
  @media (min-width:34.375rem) {        /* 550px */
    .container {
	width:80%;
}
}

/* Base Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
	font-family:"JetBrains Mono";
	src:url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
	font-style:normal;
	font-weight:100 800;
	font-display:swap;
}
@font-face {
	font-family:"JetBrains Mono";
	src:url("../fonts/JetBrainsMono-VariableItalic.woff2") format("woff2");
	font-style:italic;
	font-weight:100 800;
	font-display:swap;
}
  body {
	margin:0;
	padding:0;
	background-color:var(--site-background);
	color:var(--site-text);
	font-family:"JetBrains Mono",monospace;
    font-weight:400;
	line-height:1.6;
}

/* Base Typography Settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Base size - 16px browser default */
:root {
  color-scheme:light;
  --site-background:#ffffff;
  --site-text:#111111;
  --site-text-muted:#666666;
  --site-text-secondary:#333333;
  --site-text-placeholder:#555555;
  --site-text-kicker:#666666;
  --site-text-status:#333333;
  --site-contact-hover:#666666;
  --site-link:#2457F5;
  --site-link-hover:#083BDA;
  --site-surface:#f0f0f0;
  --site-surface-card:#f0f0f0;
  --site-surface-raised:#fafafa;
  --site-surface-art:#f5f5f5;
  --site-surface-control:#f0f0f0;
  --site-border:#dddddd;
  --site-border-muted:#e5e5e5;
  --site-border-strong:#d5d5d5;
  --site-border-placeholder:#cccccc;
  font-size:16px;           /* Using a 1.25 modular scale for typography */
  --scale-0:1rem;           /* 16px */
  --scale-1:1.25rem;        /* 20px */
  --scale-2:1.563rem;       /* 25px */
  --scale-3:1.953rem;       /* 31px */
  --scale-4:2.441rem;       /* 39px */
  --scale-5:3.052rem;       /* 49px */

  /* Spacing units */
  --spacing-xs:0.5rem;      /* 8px */
  --spacing-s:1rem;         /* 16px */
  --spacing-m:1.5rem;       /* 24px */
  --spacing-l:2rem;         /* 32px */
  --spacing-xl:3rem;        /* 48px */
  --spacing-xxl:4rem;       /* 64px */
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --site-background:#000000;
  --site-text:#ffffff;
  --site-text-muted:#888888;
  --site-text-secondary:#dddddd;
  --site-text-placeholder:#bbbbbb;
  --site-text-kicker:#aaa4b5;
  --site-text-status:#d0d0d0;
  --site-contact-hover:#cccccc;
  --site-link:#4899F7;
  --site-link-hover:#7AB8FF;
  --site-surface:#131313;
  --site-surface-card:#292929;
  --site-surface-raised:#090909;
  --site-surface-art:#111111;
  --site-surface-control:#111111;
  --site-border:#252525;
  --site-border-muted:#2a2a2a;
  --site-border-strong:#444444;
  --site-border-placeholder:#555555;
}

/* Avatar */
.avatar {
	width: 8rem;             /* 128px */
	height: 8rem;
	border-radius: 50%;
	object-fit: cover;
	background-position: center;
	margin-bottom: var(--spacing-l);
	margin-left: auto;
	margin-right: auto;
	display: block;
  }

/* Typography Scale */
h1 {
	margin:0 0 var(--spacing-m) 0;
	font-size:clamp(1.75rem,1.5rem + 1vw,2rem);
	font-weight:700;
	line-height:1.1;
	letter-spacing:-0.02em;
	word-wrap:break-word;
	overflow-wrap:break-word;
	hyphens:auto;           /* Delete this to remove automatic hyphen on line break */
}
body {
	font-size:clamp(1rem,0.95rem + 0.5vw,1.25rem);
  	line-height:1.6;
}
.container p {
	margin:0 0 var(--spacing-xl) 0;
	font-size:clamp(1rem,0.95rem + 0.5vw,1.25rem);
	line-height:1.6;
}
.bio {
	max-width:48rem;
	margin:0 auto var(--spacing-xs);
	box-sizing:border-box;
	text-align:center;
}
.bio p {
	margin:0 0 1rem;
	font-size:clamp(1rem,0.95rem + 0.4vw,1.2rem);
	line-height:1.7;
}
.bio p:last-child {
	margin-bottom:0;
}
.button-stack {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:1rem;
	width:100%;
	margin:0 auto;
	padding:var(--spacing-xxl) 0;
}
.button-stack > .button {
	margin-bottom:0;
}

.content-section {
	width:100%;
	max-width:68rem;
	margin:var(--spacing-l) auto;
	text-align:center;
}
.button-stack + .content-section {
	margin-top:var(--spacing-xs);
}
.content-section.contact {
	max-width:34rem;
}
.content-section h2 {
	margin:0 0 var(--spacing-s);
	font-size:var(--scale-2);
}
.project-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:clamp(0.5rem,2.4vw,1.5rem);
	width:100%;
	max-width:64rem;
	margin:0 auto;
}
.project-card {
	position:relative;
	display:block;
	width:100%;
	aspect-ratio:1 / 1;
	overflow:hidden;
	box-sizing:border-box;
	color:#ffffff;
	text-align:left;
	text-decoration:none;
	transition:transform 0.2s ease;
	background:#111111;
	border:2px solid var(--site-border);
	border-radius:0.75rem;
}
.project-card--empty {
	background:var(--site-surface-card);
}
.project-card-image {
	display:block;
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.project-card:hover,
.project-card:focus-visible {
	transform:translateY(-8px) scale(1.08);
}
.project-card:active {
	transform:translateY(-2px) scale(1.03);
}
.project-carousel-control,
.project-carousel-status {
	display:none;
}
.project-carousel.is-ready {
	display:grid;
	grid-template-columns:2.5rem minmax(0,1fr) 2.5rem;
	align-items:center;
	gap:0.5rem;
}
.project-carousel.is-ready .project-carousel-control {
	display:grid;
	place-items:center;
	width:2.5rem;
	max-width:none;
	min-height:2.5rem;
	padding:0;
	margin:0;
	color:var(--site-text);
	font-size:1.4rem;
	line-height:1;
	background:var(--site-surface-control);
	border:1px solid var(--site-border-strong);
	border-radius:50%;
}
.project-carousel-control:disabled {
	opacity:0.4;
	cursor:default;
}
.project-carousel-viewport {
	min-width:0;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:none;
}
.project-carousel-viewport::-webkit-scrollbar {
	display:none;
}
.project-grid.is-carousel {
	display:flex;
	gap:0;
	width:100%;
	max-width:none;
	margin:0;
}
.project-grid-page {
	display:grid;
	flex:0 0 100%;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:clamp(0.5rem,2.4vw,1.5rem);
	box-sizing:border-box;
	margin:0 auto;
	padding:0.5rem 0;
	scroll-snap-align:start;
	scroll-snap-stop:always;
}
.project-grid.is-carousel .project-card:hover,
.project-grid.is-carousel .project-card:focus-visible {
	transform:translateY(-0.5rem);
}
.project-carousel.is-ready .project-carousel-status {
	display:block;
	grid-column:1 / -1;
	margin:0;
	color:var(--site-text-muted);
	font-size:0.85rem;
	text-align:center;
}
.contact a {
	color:var(--site-text);
	overflow-wrap:anywhere;
}
.contact a:hover {
	color:var(--site-contact-hover);
}
.contact-link {
	font-weight:600;
	text-decoration:none;
}
.project-detail {
	max-width:68rem;
	padding-bottom:var(--spacing-l);
	text-align:left;
}
.project-detail .project-back {
	display:inline-flex;
	align-items:center;
	padding:0.5rem 1rem;
	margin-bottom:var(--spacing-xxl);
	color:var(--site-text);
	background:var(--site-surface-control);
	border:1px solid var(--site-border-strong);
	border-radius:0.5rem;
	text-decoration:none;
}
.project-detail h1 {
	margin-bottom:var(--spacing-s);
}
.project-detail .project-hero {
	display:block;
	width:100%;
	aspect-ratio:16 / 9;
	background:var(--site-surface-control);
	border:2px dashed var(--site-border-placeholder);
	border-radius:0.75rem;
}
.project-detail section {
	margin:var(--spacing-l) 0;
	text-align:left;
}
.project-detail section h2 {
	margin:0 0 var(--spacing-s);
	font-size:var(--scale-2);
}
.project-detail section p {
	margin:0;
	font-size:var(--scale-0);
}
.game-off-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--spacing-l);
	margin:0 0 var(--spacing-l);
	text-align:left;
}
.game-off-brand {
	display:flex;
	align-items:center;
	gap:var(--spacing-s);
}
.project-detail .game-off-kicker {
	margin:0 0 0.35rem;
	color:var(--site-text-kicker);
	font-size:0.7rem;
	font-weight:700;
	letter-spacing:0.16em;
	text-transform:uppercase;
}
.project-detail .game-off-wordmark {
	margin:0;
	color:#ff46ca;
	font-size:clamp(2rem,4vw,3rem);
	font-weight:900;
	letter-spacing:-0.07em;
	line-height:0.95;
	text-transform:uppercase;
	text-shadow:0.04em 0.05em 0 #542191;
	white-space:nowrap;
}
.game-off-year {
	color:#43e8f0;
	text-shadow:0.04em 0.05em 0 #175b93;
}
.game-off-logo {
	display:block;
	width:4rem;
	height:auto;
	flex:0 0 auto;
}
.game-off-project-title {
	text-align:right;
}
.project-detail .game-off-project-title h1 {
	margin:0 0 0.35rem;
	font-size:clamp(1.75rem,3vw,2.4rem);
	font-weight:650;
	line-height:1.15;
}
.project-detail .game-off-status {
	display:inline-flex;
	align-items:center;
	gap:0.45rem;
	margin:0;
	padding:0.25rem 0.7rem;
	color:var(--site-text-status);
	font-size:0.75rem;
	font-weight:500;
	background:var(--site-surface-control);
	border:1px solid var(--site-border-strong);
	border-radius:999px;
}
.project-detail .game-off-status::before {
	width:0.4rem;
	height:0.4rem;
	content:"";
	background:#22c55e;
	border-radius:50%;
}
.game-off-featured-art {
	margin:0;
}
.game-off-artwork {
	display:block;
	width:100%;
	max-width:60rem;
	height:auto;
	margin:0 auto;
	box-sizing:border-box;
	border:2px solid var(--site-border);
	border-radius:1rem;
}
.game-off-artwork--featured {
	transform:scale(1.06);
}
figcaption {
	text-align:center;
}
.game-off-featured-art figcaption {
	margin-top:0.65rem;
	color:var(--site-text-muted);
	font-size:0.85rem;
}
.project-gallery {
	margin:var(--spacing-l) 0;
}
.project-gallery h2 {
	margin:0 0 var(--spacing-s);
	font-size:var(--scale-2);
}
.project-media-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:var(--spacing-s);
}
.project-media-placeholder {
	display:grid;
	place-items:center;
	min-height:8rem;
	aspect-ratio:1 / 1;
	padding:1rem;
	box-sizing:border-box;
	text-align:center;
	color:var(--site-text-muted);
	font-size:0.9rem;
	background:var(--site-surface);
	border:2px dashed var(--site-border-placeholder);
	border-radius:0.5rem;
}
.project-media-placeholder--wide {
	grid-column:span 2;
	aspect-ratio:16 / 9;
}
.project-motion-grid {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:var(--spacing-s);
}
.project-media-placeholder--motion {
	aspect-ratio:16 / 9;
	min-height:10rem;
}
.game-off-content {
	margin:var(--spacing-m) auto;
	text-align:left;
}
.game-off-content section {
	margin:0;
	text-align:left;
}
.game-off-content h2 {
	margin:0 0 var(--spacing-s);
	font-size:var(--scale-2);
}
.project-detail .game-off-description p {
	max-width:none;
	margin:0;
	color:var(--site-text-secondary);
	font-size:var(--scale-0);
	line-height:1.65;
}
.project-detail .game-off-description p + p {
	margin-top:var(--spacing-s);
}
.game-off-theme-art {
	margin:var(--spacing-m) 0 var(--spacing-s);
	padding:0.75rem;
	border:2px dashed var(--site-border-placeholder);
	border-radius:0.75rem;
}
.game-off-theme-art img {
	display:block;
	width:100%;
	height:auto;
	border-radius:0.5rem;
}
.game-off-theme-art figcaption {
	margin-top:0.65rem;
	color:var(--site-text-muted);
	font-size:0.8rem;
}
.game-off-facts {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	margin:0;
	margin-top:var(--spacing-m);
	background:var(--site-surface-raised);
	border:2px dashed var(--site-border-placeholder);
	border-radius:0.75rem;
}
.game-off-facts div {
	display:grid;
	align-content:center;
	gap:0.3rem;
	padding:0.85rem 1rem;
	border-right:2px dashed var(--site-border-placeholder);
}
.game-off-facts div:last-child {
	border-right:0;
}
.game-off-facts dt {
	color:var(--site-text-muted);
	font-size:0.7rem;
	font-weight:600;
	letter-spacing:0.08em;
	text-transform:uppercase;
}
.game-off-facts dd {
	margin:0;
	color:var(--site-text);
	font-size:0.85rem;
}
.game-off-facts a {
	color:inherit;
	text-decoration-color:var(--site-text-muted);
	text-underline-offset:0.2em;
}
.game-off-facts a:hover {
	color:var(--site-text);
}
.artwork-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
	gap:var(--spacing-s);
}
.artwork-placeholder,
.store-link-placeholder {
	display:grid;
	place-items:center;
	min-height:4rem;
	padding:0.75rem;
	box-sizing:border-box;
	color:var(--site-text-placeholder);
	font-size:var(--scale-0);
	text-align:center;
	border:2px dashed var(--site-border-placeholder);
	border-radius:0.5rem;
}
.artwork-placeholder {
	aspect-ratio:16 / 9;
	background:var(--site-surface-art);
}
.store-link-placeholders {
	display:flex;
	flex-wrap:wrap;
	gap:var(--spacing-l);
	justify-content:center;
}

/* Footer */
footer {
	margin:var(--spacing-xxl) 0;            /* 4rem (64px) top and bottom */
    font-size:var(--scale-0);
}

/* Responsive adjustments */
@media (max-width:64rem) {
.game-off-header {
	flex-direction:column;
	align-items:flex-start;
	gap:var(--spacing-m);
}
.game-off-project-title {
	text-align:left;
}
.project-media-grid {
	grid-template-columns:repeat(2,minmax(0,1fr));
}
.project-motion-grid {
	grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:34.375rem) {              /* 550px */
.container {
	width:100%;
	padding-right:var(--spacing-m);
	padding-left:var(--spacing-m);
}
.profile-banner-frame {
	position:relative;
	aspect-ratio:3.3 / 1;
	overflow:hidden;
	margin-bottom:calc(3rem - 3.48%);
}
.profile-banner {
	position:absolute;
	top:0;
	left:-19.6%;
	width:145%;
	max-width:none;
}
.bio p {
	font-size:0.875rem;
	line-height:1.55;
}
.bio {
	margin-bottom:var(--spacing-m);
}
.container.project-detail {
	padding:var(--spacing-m) var(--spacing-m) 0;
}
.project-detail .project-back {
	margin-bottom:var(--spacing-m);
}
.project-detail > main > h1,
.project-detail .game-off-project-title h1 {
	font-size:clamp(1.35rem,5.5vw,1.6rem);
}
.project-detail .project-back {
	padding:0.35rem 0.65rem;
	font-size:0.8rem;
}
.project-detail section h2 {
	font-size:1.2rem;
}
.project-detail section p,
.project-detail .game-off-description p {
	font-size:0.9rem;
}
figcaption {
	font-size:0.7rem;
	line-height:1.4;
}
.game-off-header {
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	justify-content:space-between;
	margin-bottom:var(--spacing-s);
	gap:0.5rem;
}
.button-stack {
	padding:var(--spacing-m) 0;
}
.project-grid {
	grid-template-columns:repeat(2,minmax(0,1fr));
}
.game-off-artwork {
	width:100%;
}
.game-off-artwork--featured {
	max-width:none;
	margin:0 auto;
	transform:scale(1.02);
}
.button-stack > .button {
	max-width:none;
}
.store-link-placeholders {
	gap:var(--spacing-m);
}
.game-off-facts {
	grid-template-columns:repeat(3,minmax(0,1fr));
	margin-top:var(--spacing-s);
}
.game-off-facts div {
	gap:0.2rem;
	padding:0.65rem 0.5rem;
	border-right:2px dashed var(--site-border-placeholder);
	border-bottom:0;
}
.game-off-facts div:last-child {
	border-right:0;
}
.game-off-facts dt {
	font-size:0.6rem;
	letter-spacing:0.04em;
}
.game-off-facts dd {
	font-size:0.7rem;
	line-height:1.3;
	overflow-wrap:anywhere;
}
.game-off-theme-art img {
	width:80%;
	margin:0 auto;
}
.game-off-header {
	gap:0.5rem;
}
.game-off-brand {
	flex:1 1 0;
	min-width:0;
	align-items:flex-start;
	gap:0.5rem;
}
.game-off-logo {
	width:clamp(2.25rem,10vw,2.75rem);
}
.game-off-project-title {
	flex:0 0 auto;
	min-width:0;
	max-width:45%;
	text-align:right;
}
.project-detail .game-off-project-title h1 {
	font-size:clamp(0.95rem,4.2vw,1.15rem);
}
.project-detail .game-off-status {
	gap:0.3rem;
	padding:0.18rem 0.3rem;
	font-size:clamp(0.55rem,2.5vw,0.625rem);
	white-space:nowrap;
}
.project-detail .game-off-kicker {
	font-size:clamp(0.55rem,2.7vw,0.7rem);
}
.project-carousel.is-ready {
	display:block;
}
.project-carousel.is-ready .project-carousel-control {
	display:none;
}
.project-carousel.is-ready .project-grid-page {
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:clamp(0.5rem,2.4vw,1rem);
}
.project-detail .game-off-wordmark {
	font-size:clamp(0.75rem,3.3vw,0.95rem);
}
.project-gallery {
	margin:var(--spacing-m) 0;
}
.project-media-grid {
	gap:0.75rem;
}
.project-media-placeholder--wide {
	min-height:9rem;
	aspect-ratio:16 / 10;
}
.project-motion-grid {
	grid-template-columns:1fr;
	gap:0.75rem;
}
.project-media-placeholder--motion {
	min-height:8.5rem;
}
.game-off-content {
	gap:var(--spacing-s);
	margin-top:var(--spacing-s);
}
.avatar {
	margin-bottom:var(--spacing-m);
}
footer {
	margin:var(--spacing-xl) 0;         	/* 3rem (48px) top and bottom */
}
}

@media (min-width:64.0625rem) {
.button-stack {
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	max-width:64rem;
	gap:1rem;
}
.button-stack > .button {
	flex:0 1 13rem;
	width:auto;
	max-width:none;
}
}

/* Links
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  a {
	color:var(--site-link);
	text-decoration:underline;
}
a:hover {
	color:var(--site-link-hover);
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:100%;
	max-width:18.75rem;             	/* 300px */
 	min-height:3rem;                /* 48px */
  	padding:0.75rem 1rem;         	/* 12px ; 16px */
	font-size:clamp(1rem,0.95rem + 0.35vw,1.125rem);
  	font-weight:700;
	text-decoration:none;
	white-space:normal;
  	background-color:var(--button-background,transparent);
	color:var(--button-text,#000000);
	border:var(--button-border,none);
	border-radius:0.5rem;
	cursor:pointer;
	box-sizing:border-box;
	hyphens:auto;               	/* Delete this to remove automatic hyphen on line break */
  	margin-bottom:1rem;
	text-align:center;
	line-height:1.3;
}

/* Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon {
	width:1.25rem;
	height:1.25rem;
	margin-right:0.5rem;
	flex-shrink:0;
}

/* Avatar Modifiers
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
   /* Modifier for no avatar rounding */
   .avatar--none {
	border-radius: 0%;
  }

  /* Modifier for rounded avatar */
  .avatar--rounded {
	border-radius: 50%;
  }

  /* Modifier for slightly rounded corners */
  .avatar--soft {
	border-radius: 0.5rem;   /* 8px rounded corners */
  }

/* Site-wide theme selection is configured in js/site-theme.js. */
:focus-visible {
	outline:2px solid #4899F7;
	outline-offset:2px;
}

/* Button Text Color Override
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .button:hover,button:hover {
	color:var(--button-text,#000000);
}

/* Privacy Page Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container-left nav {
	margin:var(--spacing-l) 0;
	text-align:left;
}
section {
	margin:var(--spacing-xl) 0;
	text-align:left;
}
h2 {
	font-size:var(--scale-3);
	font-weight:700;
	margin-bottom:var(--spacing-m);
}
h3 {
	font-size:var(--scale-2);
	font-weight:600;
	margin:var(--spacing-l) 0 var(--spacing-s) 0;
}
ul {
	list-style:none;
	padding:0;
	margin:0 0 var(--spacing-m) 0;
}
ul li {
	margin-bottom:var(--spacing-xs);
}

/* Privacy page specific responsive adjustments */
  @media (max-width:34.375rem) {
	h2 {
	font-size:var(--scale-2);
	}
	h3 {
	font-size:var(--scale-1);
	}
	section {
	margin:var(--spacing-l) 0;
	}
}