/* Fonts
==================================== */

/* Latin Basic */
@font-face {
  font-family: 'Fraunces';
  font-display: swap;
  font-weight: 100 900;
  src: url('/font/Fraunces--latin_basic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-display: swap;
  font-weight: 100 900;
  src: url('/font/Fraunces--vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-display: swap;
  font-weight: 100 900;
  font-style: italic;
  src: url('/font/Fraunces-Italic--latin_basic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'poppy-fineliner';
  src: url('/font/Poppy-Fineliner-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/*

my dear reader:
truly recommend against looking here.
"why did anh build it like that" questions we are all asking
why indeed? i don't recommend it

*/

/* Sizes
==================================== */

:root {
	--width-container: 1100px;
	--width-measure: 680px;
	--width-polaroid: clamp(180px, 30vw, 300px);
	--width-note: clamp(180px, 40vw, 250px);
	--width-note-lg: calc(var(--width-note) * 1.5);


	--sp-xs: 1rem;
	--sp-sm: 2rem;
	--sp: 3rem;
	--sp-lg: 4rem;
	--sp-xl: 5rem;
	--sp-edge: clamp(1.5rem, 5vw, 3rem);
	--sp-gap: clamp(1rem, 5vw, 2rem);
}


/* Typography
==================================== */

:root {
	--font-body: 'Fraunces', serif;
  --font-hand: 'poppy-fineliner', sans-serif;

  --font-size-base: clamp(18px, 3vw, 24px);
  --font-size-sm: .85em;

  --font-size-hand: clamp(16px, 2.5vw, 20px);
  --font-size-hand-sm: clamp(14px, 2.25vw, 18px);
  --font-size-hand-xs: clamp(12px, 2vw, 16px);
}


/* Colour Swatches
==================================== */

:root {

	--sand: #FFDFC3;
	--chestnut: #683E1D;
	--walnut: #502920;

	--yellow: #FDD880;
	--butter: #FDEBBF;
	--goldenrod: #F3AD06;
	
	--babypink: #FDDCE8;
	--pink: #F47199;
	--magenta: #CF1C51;
	--winered: #7F0C2E;
	
	--honeydew: #F0F1E9;
	--melongreen: #D2E1B2;
	--darkgreen: #184a0c;

	--blurple: #4341C0;
	--navy: #24395F;

	--lilac: #F7EBF4;
	--lavender: #D9CDF9;
	--periwinkle: #B4A7DA;

	--powderblue: #ECF0F7;
	--lightblue: #BBD8E9;


	/* Theme */
	--bg: var(--lilac);

  --text: var(--walnut);
  --text-subtle: var(--chestnut);
  --text-accent: var(--magenta);
  --text-complement: var(--blurple);

  --link: var(--magenta);
  --link-underline: var(--pink);
  --link-hover: var(--blurple);
  --link-underline-hover: var(--periwinkle);
}



/* CSS Resets 
=============================== */

* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
}






/* Base Styles
=============================== */

body {
	background: var(--bg);
	margin: 0;

	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: 1.5;
}

::selection {
	background: var(--yellow);
}

a {
	color: var(--link);
	transition: .2s ease-in-out;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--link-underline);
}
a:hover {
	color: var(--link-hover);
	text-decoration-color: var(--link-underline-hover);
}

code {
	background: var(--honeydew);
	border: 1px dashed var(--melongreen);
	border-radius: 8px;
	box-shadow: 1px 1px 0 rgba(0,0,0,0.08);
	color: var(--darkgreen);
	font-size: .85em;
	padding: .15em .35em;
}






/* Utility Classes
=============================== */

.container {
	margin-inline: auto;
	max-width: var(--width-container);
	padding-inline: var(--sp-edge);
	width: 100%;
}

.lede {
	color: var(--text-complement);
	font-style: italic;
	font-weight: bold;
}

.highlight {
	background: var(--butter);
}



/* Polaroid */

.polaroid {	
	background: #f2f2f2;
	background-image: linear-gradient(
    0deg,
    hsl(0deg 0% 95%) 0%,
    hsl(344deg 0% 95%) 18%,
    hsl(344deg 0% 95%) 26%,
    hsl(344deg 0% 95%) 33%,
    hsl(344deg 0% 96%) 39%,
    hsl(344deg 0% 96%) 44%,
    hsl(344deg 0% 96%) 50%,
    hsl(344deg 0% 96%) 56%,
    hsl(344deg 0% 97%) 61%,
    hsl(344deg 0% 97%) 67%,
    hsl(344deg 0% 97%) 74%,
    hsl(344deg 0% 97%) 82%,
    hsl(0deg 0% 98%) 100%
  );
	border-radius: 4px 4px 8px 8px;
	box-shadow: var(--shadow-elevation-low);
	width: var(--width-polaroid);
	padding-inline: 1.5rem;
	padding-top: 2rem;
}
.polaroid img {
	border-top: 1px solid rgba(0,0,0,.5);
	border-left: 1px solid rgba(255,255,255,.5);
}
.polaroid figcaption {
	background: #f7f7f7;
	border-radius: 0 0 8px 8px;
	margin-top: 1rem;
	margin-inline: -1.5rem;
	padding-block: 1em;
	padding-inline: 1em;

	color: var(--navy);
	font-size: var(--font-size-hand-sm);
	line-height: 1.25;
}

@media screen and (max-width: 750px) {
	.polaroid {
		padding-inline: .75em;
		padding-top: 1.5em;
	}
	.polaroid figcaption {
		margin-inline: -.75em;
	}
}

/* Tape */

.tape {
	position: relative;
}
.tape::before {
	content: '';
	position: absolute;

	opacity: 0.75;
	width: 100px;
	height: 1.5em;
	transform: rotate(2deg);

	box-shadow: var(--shadow-elevation-low);
	z-index: 5;
}

/* Tape Positioning */
.tape--n::before {
	top: -.8em;
	left: calc(50% - 50px);
}
.tape--ne::before {
	top: -.8em;
	right: 1em;
}
.tape--nw::before {
	top: -.8em;
	left: 1.5em;
}

/* Tape Colour & Pattern */
.tape--purple::before {
	background: var(--lavender);
}
.tape--pink::before {
	background: var(--babypink);
}
.tape--green::before {
	background: var(--melongreen);
}




/* Site Header
==================================== */

.site-header {
	background-image: url('/img/2026/01/grid-bg.png');
	background-position: 0 100%;
	background-size: 20px;
	background-repeat: repeat;

	font-family: var(--font-hand);
	font-size: var(--font-size-hand-sm);
	text-transform: uppercase;

	padding-block: var(--sp);
}
.site-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 2em;
}

.site-nav__home {
	position: relative;
}
.site-nav__icon {
	width: 3em;
}
.site-nav__title {
	position: absolute;
	top: -.5em;
	left: calc(100% - .5em);

	background: var(--pink);
	border-radius: 4px;
	padding: .15em .25em;
	transform: rotate(5deg);

	color: var(--bg);
	line-height: 1;
}


.site-nav__list {
	list-style-type: none;
	margin: 0;
	padding-left: 0;

	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5em;
}
.site-nav__item.current {
	position: relative;
	z-index: 0;
}
.site-nav__item.current::before {
	content: '';
	position: absolute;
	left: -.15em;
	bottom: .1em;
	width: calc(100% + .5em);
	height: 1em;
	background: var(--yellow);
	z-index: -1;
	transform: rotate(-3deg);
}
.site-nav__item > a {
	color: var(--text);
	text-decoration: none;
	text-decoration-color: var(--magenta);
	text-underline-offset: 4px;
}
.site-nav__item > a:hover {
	color: var(--text);
	text-decoration: underline;
	text-decoration-color: var(--magenta);
	text-decoration-thickness: 2px;
}



.post-header {
	background-image: url('/img/2026/01/grid-bg.png');
	background-position: 0 0;
	background-size: 20px;
	background-repeat: repeat;

	border-bottom: 1px solid rgba(0,0,0,0.03);

	padding-top: var(--sp-lg);
	padding-bottom: var(--sp);
}

h1 {
	margin-block: 0;

	color: var(--magenta);
	font-size: clamp(2.5em, 10vw, 3.5em);
	font-variation-settings: "SOFT" 100,"WONK" 100;
	font-weight: 600;
	line-height: .9;
}

.post-header__date {
	color: var(--text-subtle);
	font-family: var(--font-hand);
	font-size: var(--font-size-hand);
	margin-block: 1.5em 0;
	text-transform: uppercase;
}

@media screen and (max-width: 440px) {
	.post-header {
		padding-top: 0;
	}
}



/* Post Content
================================== */

.post-content {
	padding-block: var(--sp);
	position: relative;

	--shadow-color: 320deg 14% 62%;
  --shadow-elevation-low:
    0.3px 0.6px 0.6px hsl(var(--shadow-color) / 0.44),
    0.4px 0.9px 1px -1.8px hsl(var(--shadow-color) / 0.35),
    1.1px 2.3px 2.5px -3.5px hsl(var(--shadow-color) / 0.27);
   --shadow-elevation-medium:
    0.3px 0.6px 0.6px hsl(var(--shadow-color) / 0.46),
    0.7px 1.5px 1.6px -1.2px hsl(var(--shadow-color) / 0.39),
    2.1px 4.3px 4.6px -2.4px hsl(var(--shadow-color) / 0.32),
    5.5px 11.3px 12.2px -3.5px hsl(var(--shadow-color) / 0.26);
  --shadow-elevation-high:
    0.3px 0.6px 0.6px hsl(var(--shadow-color) / 0.43),
    1px 2.2px 2.3px -0.5px hsl(var(--shadow-color) / 0.4),
    2px 4.2px 4.5px -1px hsl(var(--shadow-color) / 0.36),
    3.7px 7.6px 8.2px -1.5px hsl(var(--shadow-color) / 0.33),
    6.4px 13.3px 14.3px -2px hsl(var(--shadow-color) / 0.3),
    10.8px 22.3px 24px -2.5px hsl(var(--shadow-color) / 0.27),
    17.1px 35.4px 38px -3px hsl(var(--shadow-color) / 0.24),
    26px 53.7px 57.7px -3.5px hsl(var(--shadow-color) / 0.21);
}


/* Sticky note at top */
.stickynote {
	background: var(--butter);
	border-radius: 20px;
	width: var(--width-note);
	padding: .5em 1em 2em;
	transform: rotate(2deg);

	float: right;
  margin-top: calc(var(--sp) * -1 - 2em);
  margin-left: 1.5em;
  margin-bottom: 1.5em;

	color: var(--text-subtle);
	font-family: var(--font-hand);
	font-size: var(--font-size-hand-sm);
	line-height: 1.3;

	box-shadow: var(--shadow-elevation-low);
}
@media screen and (max-width: 374px) {
	:root {
		--width-note: 80%;
	}
	.stickynote {
		border-radius: 12px;
		float: none;
		margin-left: auto;
		padding-bottom: 1em;
	}

}




.post-content > p:first-of-type {
	margin-top: 0;
}

.post-content > :where(p, ul, ol) {
	max-width: var(--width-measure);
}


/* Post Content - Styles
================================== */

/* Lists */

@counter-style ul-primary {
  system: cyclic;
  /* symbols: ⬥; */
  symbols: '✦';
  suffix: ' '; 
  /* U+2004 	THREE-PER-EM SPACE (thick space) */
}

/* Blockquote */

blockquote {
	background: var(--sand);	
	border-radius: 8px;
	box-shadow: var(--shadow-elevation-low);
	margin-inline: 0;
	max-width: var(--width-measure);
	padding: 1em;

	font-size: var(--font-size-sm);
	text-indent: 1.5em each-line;
}

blockquote p {
	margin-block: .25em;
}

blockquote cite {
	display: block;
	font-family: var(--font-hand);
	font-size: var(--font-size-hand);
	text-align: right;
	text-transform: lowercase;
}



/* Asides 
============================= */

.billboard {
	color: var(--magenta);
	font-family: var(--font-hand);
	font-size: var(--font-size-hand);
	float: left;
	max-width: 23ch;
	margin-left: 2em;
	transform: rotate(2deg);
}
.billboard + figure {
	margin-left: 23ch;
}	





/* Figures 
============================= */

figure {
	margin-inline: 0;
}

figcaption {
	color: var(--text-subtle);
	font-family: var(--font-hand);
	font-size: var(--font-size-hand);
	line-height: 1.35;

	margin-top: .25em;
}
figure.formal figcaption {
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
}

.cap, .capcap, .capcapcap {
	display: block;
	margin-block: 0;
}


/* Figure Groups */

.figgroup {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: var(--sp-gap);
	grid-column-gap: var(--sp-gap);
}
.figgroup.stagger {
	--stagger: clamp(100px, 20vw, 200px);

	grid-template-rows: var(--stagger) auto auto;
}
.figgroup.stagger--1 > figure:last-child {
	grid-row-start: 2;
	grid-column-start: 2;
}
.figgroup.stagger--2 > figure:first-child {
	grid-row-start: 2;
	grid-column-start: 1;
}
.figgroup.stagger--2 > figure:last-child {
	grid-row-start: 1;
	grid-column-start: 2;
	grid-row: 1 / -1;
}

.figgroup > figure {
	margin-top: 0;
}

@media screen and (max-width: 460px) {
	.stagger {
		grid-template-columns: 1fr var(--sp-edge) 1fr;
	} 
	.stagger > figure:first-child {
		grid-column: 1 / 3;
	}
	.stagger > figure:last-child {
		grid-column: 2 / 4;
	}
}



/* Underline style */
.capref {
	position: relative;
	z-index: 0;
}
.capref::before {
	position: absolute;
	content: '';
	left: 0;
	bottom: 2px;
	width: 100%;
	height: 2px;
	background: var(--magenta);
	opacity: 1;
	transform: rotate(-1deg);
	z-index: -1;
}

@media screen and (max-width: 600px) {
	.capref::before {
		transform: rotate(-0.5deg);
	}
}



/* Specific Figure Styling
============================== */

/* Rodin */
.rodin-painting img {
	transform: rotate(0.5deg);
	box-shadow: var(--shadow-elevation-medium);
}

/* Glinda */
.glinda {
	position: relative;
}
.glinda > figcaption {
	position: absolute;
	top: 35%;
	left: 54%;
	max-width: 13ch;
	transform: rotate(5deg);

	color: white;
	font-size: var(--font-size-hand-xs);
	text-align: center;
}

/* Inuyasha photo */
.inuyasha {
	position: relative;
}
.inuyasha .capcap {
	position: absolute;
	top: 40%;
	right: -3em;
	max-width: 14ch;
	transform: rotate(-5deg);

	color: var(--magenta);
	font-size: var(--font-size-hand-sm);
}
@media screen and (max-width: 980px) {
	.inuyasha .capcap {
		transform: rotate(90deg);
	}
}

/* One Piece photo */
.onepiece figcaption {
	margin-left: auto;
	margin-right: var(--sp);
	max-width: 28ch;
	text-indent: 1em;
}


/* Concert photos */
.concert figcaption{
	text-indent: 2em;
	padding-right: var(--sp-edge);
}

/* MOMA monolith photo */
.monolith {
	position: relative;
}

.monolith .capcap {
	/* comment on top of photo */
	position: absolute;
  top: 2%;
  right: -.75em;
  max-width: 18ch;

  color: var(--navy);
  text-align: right;

  background: rgba(255,255,255,.75);
  border-right: 1.5em solid var(--blurple);
  padding-inline: .5em 1.5em;
  padding-block: .15em .1em;
  box-shadow: var(--shadow-elevation-low);

  transform: rotate(-2deg);
}



/* Stanford arcade photo */
.arcade figcaption {
	margin-left: clamp(1em, 5vw, var(--sp));
}
.arcade .cap {
	text-indent: -2em;
	margin-left: 2em;
	max-width: 18ch;
}
.arcade .capref::after { /* Arrow */
	position: absolute;
	content: url('/img/2026/02/ba_arrow-se.svg');
  top: calc(100% + .25em);
  left: 115%;
}
.arcade .capcap {
	color: var(--magenta);
	font-size: .85em;

	max-width: 22ch;
	text-indent: -2em;
	transform: rotate(-5deg) translate(120%, -1.15em);
}
.arcade .capcapcap {
	color: var(--magenta);
	font-size: .7em;

	max-width: 20ch;
	text-indent: -.5em;
	transform: rotate(-4deg) translate(190%, -1.25em);
}

@media screen and (max-width: 650px) {
	.arcade .cap {
		max-width: unset;
	}
	.arcade .capcap {
		max-width: 20ch;
		padding-right: 0;
		transform: rotate(0deg) translate(70%, .25em);
	}
	.arcade .capcapcap {
		transform: rotate(-2deg) translate(110%, 1.25em)
	}
	.arcade .capref::after {
		left: 30%;
	}
}
@media screen and (max-width: 420px) {
	
	.arcade .cap {
		max-width: 20ch;
	}
	.arcade .capcap {
		max-width: 15ch;
		transform: rotate(0deg) translate(20%, .25em);
	}
	.arcade .capref::after {
		left: 60%;
		transform: scaleX(-1);
	}
	.arcade .capcapcap {
		transform: rotate(-2deg) translate(40%, 1.25em)
	}
}


/* Stanford hands sculpture */
.hands > figcaption {
	max-width: var(--width-measure);
	text-indent: -2em;
	margin-left: 4em;
}
@media screen and (max-width: 500px) {
	.hands > figcaption {
		margin-left: 0;
		text-indent: 2em;
	}
}

/* Arizona garden cactus */

.arizona > figcaption {
	margin-left: 4em;
}


/* legion of honour beaux-arts photo */
.beauxarts figcaption {
	margin-left: 2em;
}
.beauxarts .cap {
	max-width: 28ch;
	text-indent: -1em;
}
.beauxarts .capcap {
	color: var(--text-accent);
	font-size: var(--font-size-hand-sm);
	max-width: 20ch;
	margin-left: 3em;
	text-indent: -3em;
	transform: rotate(-3deg) translate(80%, -.5em);
}

@media screen and (max-width: 440px) {
	.beauxarts .capcap {
		transform: rotate(-2deg) translate(20%, 0);
	}
}



.goldengate figcaption { 
	max-width: 50%;
}

/* golden gate bridge - polaroid */
.bridge {
	margin-left: auto;
	margin-right: clamp(1em, 5vw, var(--sp-lg));
	margin-top: -5em;
	transform: rotate(2deg);
}
.bridge img {
	box-shadow: var(--shadow-elevation-low);
}

.bridge figcaption {
	text-indent: 1.5em each-line;
}

@media screen and (max-width: 570px) {
	.bridge {
		margin-top: -3em;
	}
}
@media screen and (max-width: 480px) {
	.goldengate figcaption {
		max-width: unset;
	}
	.bridge {
		margin-top: 0;
		margin-inline: auto;
	}
}


/* palace of fine arts */
.palace figcaption {
	margin-left: var(--sp-lg);
}
.palace .capcap {
	font-size: var(--font-size-hand-sm);
	margin-left: 15ch;
	max-width: 25ch;
}
.palace .capcapcap {
	font-size: var(--font-size-hand-xs);
	margin-left: calc(15ch + 5em);
	margin-top: .5em;
	max-width: 30ch;
	text-indent: -2em;
}
@media screen and (max-width: 750px) {
	.palace figcaption {
		margin-left: 1em;
	}
}
@media screen and (max-width: 440px) {
	.palace .capcap {
		margin-left: 5ch;
		text-indent: 1em;
	}
	.palace .capcapcap {
		margin-left: calc(5ch + 5em);
	}
}



/* cantor art museum */

.cantor .capcap {
	color: var(--magenta);
	font-size: var(--font-size-hand-sm);

	margin-left: 25%;
	margin-top: 1em;
	max-width: 30ch;
}
.cantor .capcapcap {
	color: var(--navy);
	font-size: var(--font-size-hand-sm);

	background: var(--butter);
	border-radius: 12px;
	box-shadow: var(--shadow-elevation-low);
	padding: 1em;

	margin-left: 30%;
	max-width: 40ch;
	transform: rotate(1deg) translateY(-.5em);
}
@media screen and (max-width: 500px) {
	.cantor .cap {
		max-width: 26ch;
		text-indent: 2em;
	}
}
@media screen and (max-width: 400px) {
	.cantor .capcap {
		margin-left: var(--sp);
	}
	.cantor .capcapcap {
		margin-left: var(--sp-lg);
	}
}


/* DA ROTUNDA!! */
.rotunda del {
	text-decoration-color: var(--magenta);
	text-decoration-thickness: 3px;
}
.rotunda ins {
	color: var(--magenta);
	font-size: var(--font-size-hand-xs);
	text-decoration: none;

	display: block;
	margin-left: 20ch;
}
@media screen and (max-width: 440px) {
	.rotunda figcaption {
		max-width: 25ch;
	}
	.rotunda ins {
		transform: translateY(-1.5em);
	}

}


/* Oakland Bay Bridge */
.oakland {
	position: relative;
}
.oakland figcaption {
	position: absolute;
	right: 1em;
	top: 62%;

	color: white;
	font-size: var(--font-size-hand-xs);
	max-width: 15ch;
	text-indent: -2em;
}

/* Bird */
.bird {
	position: relative;
}
.bird figcaption {
	position: absolute;
	left: 35%;
	top: 50%;

	color: white;
	font-size: var(--font-size-hand-xs);
}

/* Salesforce */
.cityscape {
	position: relative;
}
.cityscape figcaption {
	position: absolute;
	left: 64%;
	top: 45%;

	color: white;
	font-size: var(--font-size-hand-xs);
}

@media screen and (max-width: 600px) {
	:is(.oakland, .bird, .cityscape) figcaption {
		position: relative;
		color: var(--text-subtle);
		font-size: var(--font-size-hand-sm);
		left: unset;
		right: unset;
		top: unset;
		text-indent: unset;
		max-width: unset;
	}
}


/* Food */
.figgroup.food {
	grid-template-columns: repeat(3, 1fr);
}
.food figcaption {
	font-family: var(--font-body);
	line-height: 1.25;
	text-align: center;
}
@media screen and (max-width: 650px) {
	.figgroup.food {
		grid-template-columns: 1fr 1fr;
	}
}




/* Headings */

.post-content > h2 {
	position: relative;

	color: var(--blurple);
	font-variation-settings: "SOFT" 100, "WONK" 100;
	line-height: 1;

}
.post-content > h2::before {
	content: '✦';
	color: var(--pink);
	margin-right: .35em;
} 
.post-content > h2::after {
	content: '✦';
	color: var(--pink);
	margin-left: .35em;
}



.post-content > h3 {

	color: var(--blurple);
	font-style: italic;
	font-variation-settings: "SOFT" 50, "WONK" 100;
	line-height: 1.2;

}


.directions {
	background: var(--powderblue);
	border: 2px dashed var(--lightblue);
	border-radius: 16px;
	box-shadow: var(--shadow-elevation-low);
	max-width: var(--width-measure);
	padding: .25em 1em;
	transform: rotate(-0.5deg) translateX(-.5em);

	color: var(--navy);
	font-family: var(--font-hand);
	font-size: var(--font-size-hand);
}


.cringe{
	background: var(--honeydew);

	border: 2px dashed var(--melongreen);
	border-radius: 16px;
	box-shadow: var(--shadow-elevation-low);
	margin-left: auto;
	margin-right: var(--sp-lg);
	max-width: var(--width-measure);
	padding-left: 2em;
	padding-right: clamp(.5em, 5vw, 2em);
	position: relative;
	transform: rotate(-0.5deg) translateX(-.5em);

	color: var(--darkgreen);
	font-family: var(--font-hand);
	font-size: var(--font-size-hand);

	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: var(--sp);
}
.cringe::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	background-image: url('/img/2026/02/grid-bg_black-transparent.png');
	background-size: 16px;
	background-repeat: repeat;
	border-radius: 16px;
	opacity: 0.15;
	pointer-events: none;
}
.cringe > h3 {
	grid-column: 1 / 2;
	align-self: end;
	margin-top: 2em;

	font-size: 1em;
	font-weight: normal;
	text-indent: 1em;
	text-transform: uppercase;
}
.cringe > .polaroid {
	grid-row: 1 / -1;
	grid-column: 2 / 3;

	box-shadow: var(--shadow-elevation-low);
	transform: rotate(2deg) translateY(2em);
}
.cringe > p {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}
.cringe > aside {
	position: absolute;
	bottom: 50%;
	left: 100%;
	width: 20ch;
	transform: rotate(91deg);
	transform-origin: bottom left;

	color: var(--text-subtle);
	font-size: var(--font-size-hand-sm);
	line-height: 1.25;
	text-indent: -1.15em;
}


@media screen and (max-width: 550px) {
	.cringe {
		display: block;
		margin-bottom: var(--sp-xl);
		margin-right: 0;
		padding-inline: var(--sp-edge);
	}
	.cringe > .polaroid {
		float: right;
		transform: rotate(2deg) translate(2.75em, 1em);
	}
	.cringe > aside {
		transform: rotate(1deg);
		transform-origin: top left;
		top: 100%;
		left: var(--sp);
	}
}

@media screen and (max-width: 440px) {
	.cringe > .polaroid{
		float: unset;
		margin-top: 2em;
		margin-inline: auto;
		transform: rotate(2deg) translate(0, -1em);
	}
	.cringe > aside {
		width: 100%;
		left: 0;
		padding-right: 1em;
		text-align: right;
	}
}



/* Post Content - Vertical Rhythm
================================== */

h2 {
	margin-top: var(--sp-lg);
	margin-bottom: 0;
}

h3 {
	margin-top: var(--sp-lg);
	margin-bottom: 0;
}

.directions {
	margin-top: var(--sp-sm);
	margin-bottom: var(--sp-sm);
}

.figgroup {
	margin-block: var(--sp);
}
figure:has(figcaption) + figure {
	margin-top: var(--sp);
}



/* Post Footnotes
================================== */

.post__footnotes {
	background: var(--powderblue);
	border: 2px dashed var(--lightblue);
	color: var(--navy);

	border-radius: 16px;
	box-shadow: var(--shadow-elevation-low);
	margin-left: auto;
	max-width: var(--width-measure);
	padding: var(--sp-edge);
	width: 70%;

	font-size: var(--font-size-sm);

	float: right;
	margin-top: var(--sp-lg);
	margin-bottom: calc(-1 * var(--sp-sm));
}


.post__footnotes ul {
	list-style-type: ul-primary;
	margin-block: .5em;
	padding-left: 1em;
}
.post__footnotes li::marker {
	color: var(--goldenrod);
}

.post__footnotes h2 {
	color: var(--blurple);
	margin-block: 0;
	font-style: italic;
	font-variation-settings: "SOFT" 100, "WONK" 100;
}

.post__footnotes h3 {
	margin-block: 2em 0;

	font-size: var(--font-size);
	font-variation-settings: "SOFT" 100, "WONK" 100;
}


/* Post Footer */
.post-footer {
	font-family: var(--font-hand);
	font-size: var(--font-size-hand-sm);

	max-width: var(--width-container);
	padding-inline: var(--sp-edge);
	padding-top: var(--sp-xl);
	width: 100%;
}
.post-footer > p {
	margin-block: 0;
	width: var(--width-note);
}


@media screen and (max-width: 700px) {
	.post__footnotes {
		float: unset;
		margin-bottom: 0;
		width: 100%;
	}
	.post-footer {
		padding-top: 0;
		padding-bottom: var(--sp);
	}
}




/* Site Footer
================================== */

.site-footer {
	clear: both;

	background-image: url('/img/2026/01/grid-bg.png');
	background-size: 20px;
	background-position: 0 100%;
	background-repeat: repeat;

	font-family: var(--font-hand);
	font-size: var(--font-size-hand-sm);

	border-top: 1px solid rgba(0,0,0,0.05);
	padding-block: var(--sp);
	padding-inline: var(--sp-edge);
}

.site-footer > * {
	margin-inline: auto;
	max-width: var(--width-container);
	width: 100%;
}

.footer-nav__list {
	list-style-type: none;
	margin-block: 0;
	padding-left: 0;

	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;

	text-transform: lowercase;
}

.footer-nav__list a {
	color: var(--text);
}