/* Cheryl Yu 04 Playful — the design, exactly as exported from the static build. */
:root {
	--bg: #ffffff;
	--ink: #171310;
	--muted: #956572;
	--line: #171310;
	--con: #000000;
	--fb: #cedbf1;
	--p1: #7588b8;
	--p2: #be9996;
	--p3: #cedbf1;
	--p4: #9bc3a7;
	--p5: #B8cde4;
	--cy-lb-bg: rgba(23,19,16,.94);
	--cy-sw-bg: var(--p1);
	--cy-sw-radius: 14px;
}
body { 
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	background-image: radial-gradient(circle at 1px 1px, rgba(23,19,16,.09) 1px, transparent 0);
	background-size: 22px 22px;
}
.wrap {
	max-width: 1420px;
	margin: 0 auto;
	padding: 0 clamp(16px,3vw,40px);
}
h1, h2, h3, p {
	margin: 0;
}
a {
	color: inherit;
}


/*.marq {
	overflow: hidden;
	background: var(--ink);
	color: var(--bg);
	padding: 9px 0;
	white-space: nowrap;
	border-bottom: 3px solid var(--ink);
}
.marq div {
	display: inline-block;
	animation: slide 26s linear infinite;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}
.marq span {
	margin: 0 26px;
}
.marq b {
	color: var(--p3);
}
@keyframes slide {
	from {
		transform: translateX(0);
	} to {
		transform: translateX(-50%);
	}
}
@media(prefers-reduced-motion:reduce) {
	.marq div {
		animation: none;
	}
}*/


.hero {
	padding: clamp(34px,6vw,74px) 0 clamp(26px,4vw,48px);
	position: relative;
}
.hero h1 {
	font-family: 'Bricolage Grotesque',system-ui,sans-serif;
	font-weight: 800;
	font-size: clamp(46px,11.5vw,150px);
	line-height: .85;
	letter-spacing: -.045em;
}
.hero h1 .a {
	color: #000000;
}
.hero h1 .b {
	color: #000000;
}
.hero h1 em {
	font-style: normal;
	display: inline-block;
	transform: rotate(-4deg);
	color: var(--p4)
}
.hero .row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: clamp(22px,3vw,38px)
}

.hero p { 
	max-width: 45ch;
	font-size: 16.5px;
	line-height: 1.6;
	color: #3d342c;
	
}

.chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.chip {
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 2px 2px 0 var(--ink);
	transition: transform .15s, box-shadow .15s;
}
.chip:hover {
	transform: translate(-1px,-1px);
	box-shadow: 4px 4px 0 var(--ink);
}


.filters {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	padding: clamp(8px, 1.5vw, 14px) 0 clamp(12px, 2vw, 20px) !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 60 !important;
  
  /* Full-bleed layout math */
	width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	padding-left: calc(50vw - 50%) !important;
	padding-right: calc(50vw - 50%) !important;
	box-sizing: border-box !important;

  /* SCROLL ANIMATION CONFIGURATION */
	animation: fadeBg linear both;
	animation-timeline: scroll(root); /* Links the fade directly to your mouse scroll */
	animation-range: 0px 500px;      /* Starts transparent, becomes solid 180px down */
}

/* The animation manually injects transparency at the start, then reads your --con variable at the end */
@keyframes fadeBg {
  from {
    background: rgba(255, 255, 255, 0); /* Forces full transparency at the absolute top */
  }
  to {
    background: var(--con); /* Snaps smoothly to whatever color you set in --con */
  }
}
.filters button {
	border: 2px solid var(--ink);
	background: var(--fb);
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
	box-shadow: 2px 2px 0 var(--ink);
	transition: transform .14s, box-shadow .14s, background .14s;
}
.filters button:hover { 
	transform: translate(-1px,-1px);
	box-shadow: 4px 4px 0 var(--ink)
}
.filters button sup {
	font-size: 9px;
	opacity: .6;
	margin-left: 3px;
	vertical-align: super;
}
.filters button[aria-pressed=true] {
	background: var(--p1);
	box-shadow: 2px 2px 0 var(--ink) inset,2px 2px 0 var(--ink)
}


.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(min(100%,258px),1fr));
	gap: clamp(20px,2.6vw,32px);
	padding: 14px 0 clamp(50px,8vw,110px);
}



.card {
	background: #fff;
	border: 3px solid var(--ink);
	border-radius:18px;
	padding: 11px;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
	display: block;
	box-shadow: 5px 5px 0 var(--ink);
	transition: transform .18s cubic-bezier(.3,1.5,.5,1), box-shadow .18s;
	position: relative
}
.card:hover {
	transform: translate(-3px,-3px) rotate(-.8deg);
	box-shadow: 11px 11px 0 var(--ink);
	z-index:3;
}
.card:focus-visible {
	outline: 3px solid var(--p2);
	outline-offset: 4px;
}
.card figure {
	margin: 0;
	border: 2px solid var(--ink);
	border-radius: 11px;
	overflow: hidden;
	background: var(--ph,#eee)
}
.card img {
	width: 100%; aspect-ratio: 1/1;
	object-fit: cover;
}
.card h2 {
	font-family: 'Bricolage Grotesque', system-ui,sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 12px 2px 8px
}
.card .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 2px 4px;
}
.card .tags b {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border:1.5px solid var(--ink);
	border-radius: 999px;
	padding: 2.5px 8px;
} 

/* Testing 1:1 Thumbnail on card */
/* 1. Locks the main card layout structure */
.card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important; /* Forces all cards in a row to match height uniformly */
  box-sizing: border-box !important;
}

/* 2. Forces the figure box to remain a rigid square boundary */
.card figure {
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 100% !important; /* Crucial: Locks a perfect 1:1 aspect ratio container before the image loads */
  position: relative !important;
  margin: 0 0 12px 0 !important;
  overflow: hidden !important;
}

/* 3. Forces the wide or tall image to sit flat inside the rigid square boundary */
.card figure img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Numbered pills (eg. 5 images)*/
/* .card .badge{position:absolute;top:-11px;right:-9px;background:var(--p1);color:#fff;
  border:2.5px solid var(--ink);border-radius:999px;font-size:11px;font-weight:700;padding:4px 10px;
  transform:rotate(7deg);box-shadow:2px 2px 0 var(--ink);z-index:2}
.card:nth-child(5n+1) .badge{background:var(--p1)}
.card:nth-child(5n+2) .badge{background:var(--p2)}
.card:nth-child(5n+3) .badge{background:var(--p4)}
.card:nth-child(5n+4) .badge{background:var(--p5)}
.card:nth-child(5n+5) .badge{background:var(--p3);color:var(--ink)} */


/* detail */
.detail {
	position: fixed;
	inset: 0;
	z-index: 8000;
	background: var(--bg);
	overflow-y: auto;
	display: none;
	background-image: radial-gradient(circle at 1px 1px, rgba(23,19,16,.09) 1px, transparent 0);
	background-size: 22px 22px;
}
.detail.open {
	display: block;
	animation: pop .28s cubic-bezier(.3,1.3,.5,1);
}
@keyframes pop {
	from {
		opacity:0;
		transform: scale(.985)
	}
	to {
		opacity: 1;
		transform: none
	}
}
.dbar {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--ink);
	color: var(--bg);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 11px clamp(16px,3vw,40px);
}
.dbar button {
	background: var(--p3);
	border: 2px solid var(--bg);
	color: var(--ink);
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
}
.dbar button: hover {
	background: var(--p1);
	color: #fff;
}
.cy-d-head {
	padding: clamp(30px,5vw,62px) 0 clamp(18px,2.6vw,30px);
}
.cy-d-tags {
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-bottom:18px;
	font-size:0
}
.cy-d-tags span {
	display:none
}
.cy-d-title {
	font-family: 'Bricolage Grotesque', system-ui,sans-serif;
	font-weight: 800;
	font-size: clamp(34px,7.5vw,96px);
	line-height: .88;
	letter-spacing: -.04em;
	margin-bottom: 20px;
	max-width: 16ch;
}
.cy-d-lede {
	font-size: clamp(16px,1.9vw,21px);
	line-height: 1.55;
	max-width: 56ch;
	font-weight: 500;
	color: #33291f
}
.cy-d-meta {
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
	padding: clamp(18px,2.6vw,30px) 0;
}
@media(min-width: 860px) {
	.cy-d-meta
	{
		grid-template-columns: 1.15fr .85fr;
		gap: 40px;
	}
}
.cy-d-notes p {
	font-size: 15px;
	line-height: 1.68;
	color: #4c4137;
	margin-bottom: 12px;
	max-width: 56ch;
}
.cy-d-resp {
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 5px 5px 0 var(--ink);
	align-self: start;
}
.cy-d-resp h3 {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-weight: 700;
}
.cy-d-resp dl {
	margin: 0;
	display: grid;
	gap: 11px;
	font-size: 14px;
	line-height: 1.5;
}
.cy-d-resp dt {
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--p3);
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1.5px solid var(--ink);
}
.cy-d-resp dd {
	margin: 5px 0 0;
	color:#4c4137;
}
.cy-d-galwrap {
	padding: clamp(18px,3vw,34px) 0 clamp(40px,6vw,80px);
}
.cy-d-galhead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
.cy-d-galhead h3 {
	font-family: 'Bricolage Grotesque', system-ui,sans-serif;
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -.02em;
}
.cy-d-galhead span {
	font-size: 11px;
	font-weight: 700;
	background: var(--p2);
	color: #fff;
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: 4px 11px;
}
.cy-d-gal {
	--cy-gal-gap:clamp(12px,1.8vw,20px);
	--cy-shot-radius:14px
}
.cy-d-shot {
	border: 3px solid var(--ink) !important;
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform .16s, box-shadow .16s;
}
.cy-d-shot:hover {
	transform: translate(-2px,-2px);
	box-shadow: 8px 8px 0 var(--ink);
}
.cy-d-nav {
	display: flex;
	justify-content:s pace-between;
	gap: 16px;
	padding: 20px 0 80px;
}
.cy-d-nav button {
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 14px;
	cursor: pointer;
	font: inherit;
	text-align: left;
	padding: 13px 18px;
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform .15s, box-shadow .15s;
}
.cy-d-nav button:hover {
	transform: translate(-2px,-2px);
	box-shadow: 8px 8px 0 var(--ink);
}
.cy-d-nav .r {
	text-align: right;
}
.cy-d-nav span {
	display: block;
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color:v ar(--muted);
	margin-bottom: 5px;
	font-weight: 700
}
.cy-d-nav strong {
	font-family: 'Bricolage Grotesque',system-ui,sans-serif;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -.02em;
}
footer.f {
	border-top: 3px solid var(--ink);
	padding: 20px 0 90px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content:s pace-between;
	font-size: 12px;
	font-weight: 700;
}