A Pen by Nathan Whittaker.

CSSOff-2013-Submission.markdown

CSSOff 2013 Submission

A Pen by Nathan Whittaker on CodePen.

License.

index.html

<header class="page-header">
	<h1>
		<span class="first-word">Css</span>
		<span class="second-word">Off</span>
	</h1>
	<p class="issue-info">Volume 3&mdash;September 2013</p>
</header>
<main>
	<article class="positioning-relatives is-feature">
		<h2 data-text="Positioning Relatives">Positioning Relatives</h2>
		<figure class="fading-away">
			<img alt="&ldquo;Fading Away&rdquo; photograph." class="fading-away" width="794" height="496" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/fading-away.jpg">
		</figure>
		<p>In 1958, English pictorial photographer Henry Peach Robinson created the world&rsquo;s first photomontage by combining five different negatives to make one complete print of a young girl on her deathbed. <cite>&ldquo;Fading Away&rdquo;</cite>&mdash;Robinson&rsquo;s first and most famous composite photo&mdash;depicts a young girl dying of consumption and was controversial when it was exhibited, with many believing it was not a suitable subject for photography.</p>
	</article>
	<article class="box-model">
		<h2>Box Model</h2>
		<figure class="barbie">
			<img alt="A Barbie box holds" class="box" width="192" height="287" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/barbie-box.jpg">
			<img alt="a Barbie doll." class="doll" width="200" height="295" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/barbie.jpg">
		</figure>
		<p>The Barbie doll was invented in 1959 by Ruth Handler (co-founder of Mattel), whose own daughter was called Barbara. Barbie was introduced to the world at the American Toy Fair in New York City. Barbie's job was teenage fashion doll. The full name of the &#64257;rst doll was Barbie Millicent Roberts, from Willows, Wisconsin<span class="hanging-punctuation">.</span></p>
	</article>
	<article class="staying-afloat">
		<h2>Staying Afloat</h2>
		<p>Lobsterman John Aldridge fell into the shark-infested water of Long Island while his crewmates were asleep. He was kept afloat for more than 12 hours by his rubber boots, which he used as flotation devices. The coast guard rescued him 43 miles south of Montauk where he fell off his vessel<span class="hanging-punctuation">.</span></p>
	</article>
	<article class="list-style-bullets">
		<header>
			<h2>List Style: Bullets</h2>
			<h3>A round-up of popular ammunition</h3>
		</header>
		<ul class="bullets">
			<li class="bullet remington">
				<figure class="bullet">
					<img alt="" class="bullet" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/ammunition.png">
				</figure>
				<span class="caliber">.223</span>
				<span class="brand">Remington</span>
				<span class="weight">69gr BTHP</span>
			<li class="bullet winchester">
				<figure class="bullet">
					<img alt="" class="bullet" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/ammunition.png">
				</figure>
				<span class="caliber">.308</span>
				<span class="brand">Winchester</span>
				<span class="weight">168gr BTHP</span>
			<li class="bullet russian">
				<figure class="bullet">
					<img alt="" class="bullet" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/ammunition.png">
				</figure>
				<span class="caliber">7.62×39mm</span>
				<span class="brand">Russian</span>
				<span class="weight">154gr JSP</span>
			<li class="bullet thumper">
				<figure class="bullet">
					<img alt="" class="bullet" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/ammunition.png">
				</figure>
				<span class="caliber">7.62</span>
				<span class="brand">Thumper</span>
				<span class="weight">220gr RN</span>
			<li class="bullet heavy-thumper last">
				<figure class="bullet">
					<img alt="" class="bullet" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/ammunition.png">
				</figure>
				<span class="caliber">7.62</span>
				<span class="brand">Thumper</span>
				<span class="weight">240gr BTHP</span>
		</ul>
	</article>
	<article class="displaying-famous-blocks contain-vertical-margins">
		<h2>Displaying (Famous) Blocks</h2>
		<figure id="AlbumCover" class="album-cover">
			<img alt="The Abbey Road album cover photo." class="album-cover" width="960" height="635" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/beatles.jpg">
			<a class="abbey-road-map" title="See the Abby Road map." data-alt-title="Back to the Abby Road Album Cover." href="https://maps.google.com/maps?q=Abbey+Road,+London,+United+Kingdom&amp;hl=en&amp;ll=51.537527,-0.180824&amp;spn=0.008448,0.027037&amp;sll=51.52805,-0.178185&amp;sspn=0.00845,0.035212&amp;oq=abbey+road&amp;hnear=Abbey+Rd,+London,+United+Kingdom&amp;t=m&amp;z=16">
				<img alt="Find Abbey Road on a map." class="abbey-road-map" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/abbey-road-map.jpg">
			</a>
		</figure>
		<p>Abbey Road is a thoroughfare located in the borough of Camden and the City of Westminster in London, running roughly northwest to southeast through St. John&rsquo;s Wood, near Lord&rsquo;s Cricket Ground. It is part of the B507. This road is best known for the Abbey Road Studios and the 1969 album, <cite>Abbey Road</cite>, by The Beatles.</p>
		<dl class="asset-credit">
			<dt>Photo</dt>
			<dd><a href="http://goo.gl/h44dc9">goo.gl/h44dc9</a></dd>
		</dl>
	</article>
	<article class="film-review">
		<header>
			<h2>Transformers</h2>
			<h3>Revenge of the Fallen</h3>
		</header>
		<figure class="poster">
			<img alt="The film's Blue Ray box is breathtaking." class="poster" width="185" height="244" src="//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/film-review-poster.png">
		</figure>
		<p>A noisy, underplotted, and overlong special effects extravaganza that lacks a human touch.</p>
		<dl class="rating">
			<dt>Rotten Tomato Rating
			<dd data-score="20"><!-- Collapse white-space.
		 --><progress value="0.2">20%</progress><!-- Collapse white-space.
	 --></dl>
		<dl class="world-premier">
			<dt>World Premiere
			<dd class="venue">Den Haag Theatre
			<dd class="country">The Netherlands
			<dd class="date">June 23, 2011
		</dl>
	</article>
	<article class="border-bottom-line">
		<header>
			<h2>Border Bottom Line</h2>
			<h3>Awful immigration laws from around the world</h3>
		</header>
		<ul class="immigration-laws">
			<li class="law">
				<span class="country">Italy</span> penalizes illegal immigrants with a fine of &euro;5,000-10,000 and allows immigration officials to detain them for up to 6 months.
			<li class="law">
				<span class="country">Switzerland</span> immediately deports all convicted criminals from other countries and potentially even their family members.
			<li class="law">
				<span class="country">Australia</span> detains all non-citizens without a valid visa.<!-- Collapse white-space.
		 --><li class="law">
				<span class="country">Japan</span> is allowed to pay $3,000 to each unemployed Latin <span class="sic" title="[sic]" data-correction="American">Americn</span> immigrant of Japanese descent and $2,000 to each of that unemployed worker&rsquo;s family members to return to their country of origin.<!-- Collapse white-space.
		 --><li class="law"><!-- Collapse white-space.
			 -->The <span class="country">United Arab Emirates</span> prohibits foreigners from engaging in any sort of labor union-like activity, resulting in harsh living conditions, 80-hour work weeks, back-breaking manual labor, and below-minimum-wage pay.
		</ul>
	</article>
	<article class="overflow contain-vertical-margins">
		<h2>Overflow</h2>
		<p>On the night of Aug 8, 1975, a line of people frantically piled sandbags atop Henan Province's <b>Banqiao Dam</b> while being battered by the worst storm ever recorded in the region. They were in a race with the rapidly rising Ru River to save the dam and the millions of people that lay sleeping downstream<span class="hanging-punctuation">.</span> &nbsp;It was a race they were about to lose<span class="hanging-punctuation">.</span></p>
		<p>Just after 1:00 am, the sky cleared and stars emerged from behind the storm clouds. There was an eerie calm as someone yelled, <q>The water level is going down! The flood is retreating!</q></p>
		<p>There was little chance to enjoy that calm. One survivor recalled that a few seconds later it <q>sounded like the sky was collapsing and the earth was cracking.</q> The equivalent of 280,000 Olympic-sized swimming pools burst through the crumbling dam, taking with it entire towns and as many as 171,000 lives.</p>
	</article>
</main>
<footer class="page-footer">
	<p class="issue-info">2013 CSSOff, <span class="vol">Volume 3</span></p>
	<address>
		<b>Route Gregory</b>, Building 31<br>
		01630 Pr&eacute;vessin-Mo&euml;ns, France<br>
		<a href="tel:+41227676111">+41 22 767 61 11</a>
	</address>
</footer>

<!-- Preferably put this in an external file, but there appear to be some cross-domain request restrictions that come in hand when deploying to Codepen's asset management service. -->
<svg height="0" xmlns="http://www.w3.org/2000/svg">
	<filter id="blur-5" x="-5%" y="-5%" width="110%" height="110%">
		<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
	</filter>
	<filter id="blur-20" x="-5%" y="-5%" width="110%" height="110%">
		<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
	</filter>
</svg>

script.js

var $cover = $( 'AlbumCover' );

$cover.addEvent( 'click:relay( a.abbey-road-map )', function( $e, $target ) {
	var title = $target.get( 'title' ),
		altTitle = $target.get( 'data-alt-title' );
	
	$e.preventDefault( );
	$cover.toggleClass( 'map-is-primary' );
	$target.set( {
		title: altTitle,
		'data-alt-title': title
	} );
} );

style.sass

@import "compass"
@charset 'utf-8'
@import compass

=keyframes( $name )
	@-moz-keyframes #{$name}
		@content
	@-ms-keyframes #{$name}
		@content
	@-o-keyframes #{$name}
		@content
	@-webkit-keyframes #{$name}
		@content
	@keyframes #{$name}
		@content

=respond( $query, $media: screen )
	@media #{$media} and #{$query}
		@content

=mobile
	+respond( '( max-width: 640px )' )
		@content

=small
	+respond( '( max-width: 800px )' )
		@content

=medium
	+respond( '( max-width: 1024px )' )
		@content

=mobile-article
	+mobile
		margin: 5em 0
		padding: 0
		
		h2,
		p,
			padding: 0 12.5%
		
		h2,
		p,
		figure
			margin: 2.5em 0
		
		@content

$bodyBgWidth: 45.55%

html
	background-color: #282828
	font-size: 62.5%
	
	@media screen and ( max-width: 1279px )
		font-size: .781vw
	
	+mobile
		font-size: 35%
	
body
	max-width: 1280px
	min-width: 320px
	margin: 0 auto
	background-color: white
	
	// Remove the <body> margin from consideration when a relative child calculates a percentage length.
	position: relative
	
	// Prevent a child with a negative z-index from falling below <body>
	z-index: 0
	
	+mobile
		min-height: 0
	
	// The purple background.
	&:before
		content: ''
		display: block
		width: $bodyBgWidth
		height: 24.85%
		position: absolute
		top: 0
		left: auto
		+background-image( linear-gradient( rgba( white, .23 ), rgba( white, .03 ) ), linear-gradient( rgba( #392878, .25 ), rgba( #392878, .25 ) ) )
		background-position: left bottom, left top
		background-repeat: no-repeat
		background-size: 100% 30.75%, 100%
		
		// Underlay everything.
		z-index: -1
		
		html.has-no-cssgradients &
			background-color: #cdc9dd
		
		+mobile
			content: none

main
	overflow: hidden

cite
	font-style: normal
	
.page-header
	padding: 140px 12.5% 0
	
	// Provide a positioning context for the <h1> child.
	position: relative
	z-index: 1  // Overlay <body::before> and <article.positioning-relatives>
	
	+mobile
		background-color: rgba( #392878, .25 )
		padding:
			top: 5em
			bottom: 5em
		+experimental-value( display, box )
		+experimental-value( display, flex )
		display: -ms-flexbox
	
	h1
		// @bug IE8 does not get the hairline font because it only pulls in one font per family name, regardless of style/weight values (https://code.google.com/p/googlefontdirectory/issues/detail?id=9).
		font: 100 27.9em/.806 Lato, sans-serif
		color: white
		text-transform: uppercase
		margin: 0
		position: absolute
		top: 35px
		left: 9.535%
		
		+mobile
			font-size: 3.2em
			font-weight: normal
			position: static
			+experimental( box-flex, 1 )
			+experimental( flex, 1 )
		
		.first-word,
		.second-word
			display: block
			
			+mobile
				display: inline
			
		.first-word
			letter-spacing: .04em
		
		.second-word
			letter-spacing: 0
			padding-left: 1px
			
			&:first-letter
				letter-spacing: -.08em
	
	.issue-info
		font: italic 1.2em/1 Lora, serif
		color: #b0aeb8
		text-transform: uppercase
		margin: 0 -1px 0 0
		padding-top: 1px
		text-align: right
		letter-spacing: .2em
		
		+mobile
			color: white
		
article
	&.positioning-relatives
		padding: 30.1% 12% 0 2.35%
		+box-sizing( border-box )
		width: 100 - $bodyBgWidth
		margin-bottom: 1.675em
		
		// Provide positioning context for <figure.fading-away>
		position: relative
		z-index: 0  // @browser Explicitly overlay <body::before> for IE8.
		
		// Using float, over inline-block display, to visually rearrange the order of the first two articles.
		float: right
			
		+medium
			padding-top: 33.1%
		
		+mobile-article
			float: none
			width: auto
		
		&.is-feature:before
			content: 'Feature'
			color: #cbb8a0
			font: 1.3em/1 Merriweather, serif
			text-transform: uppercase
			letter-spacing: .2em
			display: block
			margin: 0 0 .25em .2em
			position: relative
			z-index: 1  // Overlay the <h2>
			
			+mobile
				padding: 0 12.5%
			
		h2
			color: #fdcd84
			font: 7.5em/1.05 Oswald, sans-serif
			text-transform: uppercase
			margin: 0
			position: relative
			z-index: 0  // Provide a layering context for the text-shadow.
			
			// An approximation of the "Shield" layer.
			html.has-textshadow &:before
				content: attr( data-text )
				position: absolute
				top: 0
				left: 0
				z-index: -1  // Underlay the <h2> text.
				color: transparent  // @bug Safari hides the text-shadow if the text color is transparent.
				text-shadow: -.89em -.2em .26em black
				+transform( scaleY( 0.85 ) rotate( -3.84deg ) )
				
				+mobile
					content: none
			
			html.has-no-textshadow &
				color: #ffffbb  // Contrast the color with the photo a little more.
			
		figure.fading-away
			position: absolute
			top: 62.75px
			right: 5px
			width: 113.9%
			
			// Underlay <header.page-header> and any siblings.
			z-index: -1
			
			+mobile
				position: static
				width: auto
			
			&:before
				content: ''
				background:
					repeat: no-repeat
					size: 100%
					image: url( '//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/photo-shadow.png' )
				max-width: 544px
				max-height: 46px
				width: 100%
				height: 100%
				position: absolute
				bottom: -19px
				left: -51px
				
				+mobile
					content: none
			
		img.fading-away
			max-width: 794px
			max-height: 496px
			width: 100%
			height: 100%
			+rotate( -3.84deg )
			+transform-origin( left, top )
			
			+mobile
				+transform( none )
			
		p
			color: black
			font: 300 2.5em/1.32 Merriweather, serif
			margin: .74em 0 0
			
			// @bug Safari does not render fractional letter-spacing lengths (//bugs.webkit.org/show_bug.cgi?id=20606)
			letter-spacing: -.02em
			
	&.box-model
		float: left
		width: $bodyBgWidth
		text-align: center
		padding: 48.55% 3% 0 14%
		+box-sizing( border-box )
		margin-bottom: 1.675em
		
		// Overlay <body::before>
		position: relative
		z-index: 1
		
		+medium
			padding-top: 53.55%
			
		+small
			padding-top: 61.55%
		
		+mobile-article
			float: none
			width: auto
		
		h2
			color: #5f5d66
			font: italic 700 3.6em Lora, serif
			text-shadow: 1px 1px 1px #d6d2e3
			margin: 0
			
			+mobile
				text-shadow: none
		
		figure.barbie
			position: absolute
			top: 32.3%
			left: 17.65%
			width: 69%
			height: 33%
			white-space: nowrap
			z-index: -1
			
			+mobile
				position: static
				margin:
					right: auto
					left: auto
			
		img.doll,
		img.box
			background-color: #cdc9dd
			width: 50%
			height: auto
			
			+mobile
				background-color: transparent
		
		img.doll
			max-width: 200px
			max-height: 295px
			+box-shadow( 0 24px 8px -20px rgba( #502800, .5), 0 -48px 3px -45px #cdc9dd )
			position: relative
			top: 7.7%
			left: -10.95%
			
			html.has-borderimage &
				+border-image( url( '//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/barbie-border.png' ) 1 4 2 1 )
				border:
					width: 1px 4px 2px 1px
					style: solid
					color: transparent
			
			+mobile
				+box-shadow( none )
		
		img.box
			max-width: 192px
			max-height: 287px
			+box-shadow( 0 24px 8px -20px rgba( #502800, .5), 3px -3px 3px #cdc9dd )
			top: 0
			left: 0
			
			html.has-borderimage &
				+border-image( url( '//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/barbie-box-border.png' ) 2 1 3 1 )
				border:
					width: 2px 1px 3px
					style: solid
					color: transparent
			
			+mobile
				+box-shadow( none )
			
		p
			color: #6e6c77
			font: 1.9em/1.42 Lato, sans-serif
			margin: .89ex 0
			letter-spacing: -.38px
	
	&.staying-afloat
		width: 9.4%
		margin: 1.2em 0 -22px
		padding: 0 1.7% 16.77% 13.95%
		clear: both
		float: left
		text-align: right
		background:
			image: url( '//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/boots.png' )
			repeat: no-repeat
			size: 45.8%
			position: 94.5% 100%
			
		+mobile
			margin: -5em 0 5em
			padding: 5em 12.5% 0
			float: none
			width: auto
			background:
				position: 99% 100%
				size: 10% auto
		
		h2
			color: #24795a
			font: 2.1em Oswald, sans-serif
			margin: 0
			text-transform: lowercase
			letter-spacing: -.42px
			
			&:first-letter
				text-transform: uppercase
			
		p
			color: #464646
			font: 1.4em/1.355 Lato, sans-serif
			margin: .5ex 0 0
			letter-spacing: -.3px
			
	&.list-style-bullets
		width: 62.5%
		margin: 1.6em 12.45% 0 0
		+box-sizing( border-box )
		
		// Since <article.staying-afloat> is floating, <article.list-style-bullets> cannot clear any previous floats. Remedy by also floating this article.
		float: right
		
		+mobile-article
			float: none
			width: auto
		
		header
			text-align: center
			text-transform: uppercase
			padding: 2.21ex 0 1.9ex
			border:
				width: 1px 0
				style: solid
				color: #ccc
				color: rgba( black, .1 )
			
		h2,
		h3
			display: inline-block
			vertical-align: middle
			margin: 0
		
		h2
			color: #a97d35
			font: 1.5em Oswald, sans-serif
			letter-spacing: .5px
			
			+mobile
				padding: 0
			
			&:after
				content: '.'
		
		h3
			color: #e0c167
			font: 700 1.2em Lato, sans-serif
			letter-spacing: 1px
			margin-left: 1ex
		
		.bullets
			color: #e0e0e0
			font-family: Oswald, sans-serif
			list-style: none
			margin: 1.6em 0
			padding: 0
			text-align: center
			cursor: ew-resize  // Not really resizing here, but wanted some quick way to communicate the horizontal scroll.
			
			// Going with a table display because it will allow for both stretching the height of each cell (flex box) AND vertically aligning the contents to the bottom (inline-block) -- and it will collapse the border.
			display: table
			width: 100%
			border-collapse: collapse
			
			+mobile
				overflow: auto
				display: block
			
			&:hover
				figure.bullet
					opacity: .5
		
		figure.bullet
			position: relative
			left: 50%
			height: 276px
			margin: 0 0 -61px
			+transition-property( opacity, transform )
			+transition-duration( 400ms )
			
		img.bullet
			position: absolute
			width: 717px
			height: 276px
		
		.caliber,
		.brand,
		.weight
			display: block
			line-height: 1	
			padding: 0 2%
		
		.caliber,
		figure.bullet
			font-size: 7.9em
			letter-spacing: -2px
			
		.brand
			font-size: 2.8em
			letter-spacing: -.7px
			text-transform: uppercase
			
		.weight
			font-size: 3.2em
			letter-spacing: -1px
			
		li.bullet
			display: table-cell
			width: 20%
			vertical-align: bottom
			padding: 8px 0 3.5em
			border:
				width: 0 1px 0
				style: solid
				color: #ccc
				color: rgba( black, .1 )
			cursor: default
			+transition( color 100ms )
			
			+mobile
				min-width: 125px
				cursor: inherit
			
			&:hover
				color: #666
				
				figure.bullet
					+transform( translateY( -.6em ) rotate( 5deg ) )
					opacity: 1
			
			&:first-child
				border-left-color: transparent
				padding-left: 1%
			
			&.remington,
			&.winchester
				figure.bullet
					top: -.25ex
					
				.caliber
					line-height: 1.05
				
				.brand
					line-height: 1.2
					
				.weight
					line-height: 1
			
			&.remington
				figure.bullet
					margin-left: -35px
					width: 84px
					
				img.bullet
					clip: rect( 0, 84px, 276px, 0 )
					left: 0
			
			&.winchester
				figure.bullet
					margin-left: -41px
					width: 92px
					
				img.bullet
					clip: rect( 0, 242px, 276px, 150px )
					left: -150px
			
			&.russian
				figure.bullet
					margin-left: -40px
					width: 98px
					top: -1.5em
					
				img.bullet
					clip: rect( 0, 409px, 276px, 311px )
					left: -311px
						
				.caliber,
				figure.bullet
					font-size: 3.1em
					line-height: 1.1
					letter-spacing: -.75px
					
				.brand
					font-size: 4em
					line-height: 1.15
					
				.weight
					font-size: 3.9em
					line-height: .9
			
			&.thumper,
			&.heavy-thumper
				.caliber,
				figure.bullet
					font-size: 8.7em
					
				.brand
					font-size: 3.8em
					
			&.thumper
				figure.bullet
					margin-left: -38px
					width: 85px
					top: 0
					
				img.bullet
					clip: rect( 0, 558px, 276px, 473px )
					left: -473px
						
				.caliber
					line-height: .925
			
				.brand
					line-height: 1.2
					
				.weight
					font-size: 4em
					line-height: .85
					
			&.heavy-thumper
				figure.bullet
					margin-left: -37px
					width: 87px
					top: -.1ex
					
				img.bullet
					clip: rect( 0, 717px, 276px, 630px )
					left: -630px
						
				.caliber
					line-height: .8
					
				.brand
					line-height: 1.55
			
				.weight
					line-height: .8
			
			&.last
				border-right-color: transparent
				padding-right: 1%
	
	&.displaying-famous-blocks
		$pageCurlImg: linear-gradient( -45deg, transparent 50%, #695B54 50%, #81756F 51%, #6C5F58 52%, #6B5D55 53%, #7B6C65 65%, #877871 75%, #988A83 85%, #A49892 )
		
		color: white
		font-weight: 300
		font-family: Merriweather, serif
		background-color: #71625a
		margin: 0 12.5%
		clear: both
		
		+mobile
			margin: 5em 0 0
			padding-bottom: 5em
		
		h2
			font: normal 4.9em/1 Oswald, sans-serif
			text-align: center
			text-transform: uppercase
			background-color: #524741
			margin: 0
			padding: .7em 1em .67em
			
			+mobile
				font-size: 3.5em
				padding: 1em 12.5%
			
		figure.album-cover
			position: relative
			overflow: hidden
			width: 100%
			
			+mobile
				overflow: auto
				cursor: ew-resize  // Not really resizing here, but wanted some quick way to communicate the horizontal scroll.
			
			&:before
				content: ''
				position: absolute
				top: 0
				right: 0
				bottom: 0
				left: 0
				+box-shadow( 0 6px 0 rgba( black, .2 ) inset, 0 0 90px rgba( black, .67 ) inset )
				z-index: 1
				
				+mobile
					+box-shadow( 0 3px 0 rgba( black, .2 ) inset, 0 0 30px rgba( black, .67 ) inset )
				
			&.map-is-primary
				img.album-cover,
				a.abbey-road-map
					+translate( -100 + 13.5%, -100 + 20.5% )
					
					+mobile
						+transform( none )
					
					html.has-no-csstransforms &
						top: 0
						left: 0
			
				a.abbey-road-map
					&:before
						border-width: 0
						+transition-duration( 0s )
						+transition-delay( 0s )
				
					&:after
						+background-image( $pageCurlImg )
					
					+mobile
						html.has-no-csstransforms &
							left: 90%
			
		img.album-cover,
		img.abbey-road-map
			max-width: 960px
			max-height: 635px
			width: 100%
			height: auto
			display: block
			
		img.album-cover,
		a.abbey-road-map
			+transition( transform 1s )
			
			+mobile
				width: 90%
			
		img.album-cover
			position: relative
			z-index: 0
			
		a.abbey-road-map
			position: absolute
			z-index: 2
			top: 100 - 20.5%
			left: 100 - 13.5%
			width: 100%
			outline: none  // @browser Firefox seems to confuse the focus/hover state after the map transitions back to the "secondary" position.
			
			+mobile
				top: 0
				left: 90%
				width: 90%
				cursor: inherit
			
			// Map border
			&:before
				content: ''
				width: 13.5%
				height: 20.5%
				border:
					width: 7px 8px
					style: solid
					color: rgba( black, .1 )
				+box-sizing( border-box )
				position: absolute
				top: 0
				left: 0
				
				// @browser Transitioning the width/height as the box grew worked smoothly in Firefox, but was jumpy in Blink/Webkit.
				+transition( border-width 400ms 1s )
				
				+mobile
					width: 100%
					height: 100%
					border-width: 5px
			
			// The page curl.
			&:after
				content: ''
				display: block
				position: absolute
				width: 13.5%
				height: 20.5%
				top: 0
				left: 0
				padding: 7px 8px
				+box-sizing( border-box )
				background:
					repeat: no-repeat
					clip: border-box, content-box
				+background-image( $pageCurlImg, linear-gradient( -45deg, transparent 82px, rgba( black, 0.1 ) 82px ) )
				
				+mobile
					content: none
		
		p
			font-size: 2.6em
			line-height: 1.35
			letter-spacing: -.525px
			margin: .77em 2.7%
			
			+mobile
				margin: 1em 12.5%
			
		a
			color: inherit
			text-decoration: none
			
		.asset-credit
			color: #b8b1ad
			color: rgba( white, .5 )
			font-size: 1.8em
			letter-spacing: -.35px
			margin: 1.35em 2.5% 1.7em
			
			+mobile
				margin: 1em 12.5%
			
			& > dt,
			& > dd
				display: inline
			
			& > dt
				&:after
					content: ':'
					
			& > dd
				margin-left: 0
			
			a
				+transition( color 100ms )
				
				&:hover
					color: white
			
	&.film-review
		color: white
		font-family: Oswald, sans-serif
		float: right
		width: 17.58%
		background-color: #3a83bb
		position: relative
		margin: 1.5em 12.5% -2em 0
		padding:
			top: 13.9%
			bottom: 12px
		z-index: 1  // Overlay <article.displaying-famous-blocks> and <article.border-bottom-line>
		
		+mobile
			float: none
			width: 100%
			margin: 0
			padding-top: 228px
			font-size: 210%
		
		// The vertical rule
		&:before
			content: ''
			width: 1px
			height: 84.76%
			position: absolute
			top: -1.5em
			left: -7%
			margin-top: 13px
			background:
				color: #eee
				color: rgba( black, .1 )
		
		// The "notch"
		&:after
			content: ''
			position: absolute
			bottom: -16px
			left: 52.5%
			margin-left: -19px
			width: 28px
			height: 28px
			border-radius: 50%
			background-color: white
			clip: rect( 0, 28px, 12px, 0 )
		
		header
			text-transform: uppercase
			text-align: center
			margin: 1.95em 0 0
			
			+mobile
				margin:
					right: 12.5%
					left: 12.5%
		
		h2,
		h3
			font-weight: normal
			line-height: 1
			margin: 0
		
		h2
			font-size: 3.1em
			margin-bottom: .27em
		
		h3
			font-size: 2.1em
			display: inline-block
			border-bottom:
				width: 8px
				style: solid
				color: #619cc8
				color: rgba( white, .2 )
			padding-bottom: .8em
		
		figure.poster
			position: absolute
			top: -9.25%
			left: 0
			width: 100%
			text-align: center
			padding-left: 2%
			+box-sizing( border-box )
			z-index: -1  // Underlay <header>
			
			+mobile
				top: -25px
			
			// Probably more performant to use an image for the shadow/reflection, but where is the fun in that?
			&:before,
			&:after
				content: ''  // @browser Firefox does not appear to support generated images in the "content" property, using background-image instead.
			
			// Reflection
			html.has-cssfilters.has-svgfilters &:before,
			html.has-no-cssfilters.has-svgfilters &:before,
			html.has-cssfilters.has-no-svgfilters &:before
				position: absolute
				top: 90%
				right: 0
				width: 70%
				height: 50%
				+background-image( linear-gradient( rgba( black, .25 ), transparent ) )
				filter: url( '#blur-20' )
				-webkit-filter: blur( 20px )
				
				// Accommodate the augmentations from the blur filter.
				padding: 20px
				background-clip: content-box
			
			// Shadow
			html.has-cssfilters.has-svgfilters &:after,
			html.has-no-cssfilters.has-svgfilters &:after,
			html.has-cssfilters.has-no-svgfilters &:after
				width: 118%
				height: 12%
				+background-image( radial-gradient( ellipse closest-side at center, rgba( black, .9), rgba( black, 0.5 ) 60%, transparent ) )
				position: absolute
				bottom: 0
				left: -8%
				margin: 0 0 -15px -10px
				+rotate( -4.5deg )
				filter: url( '#blur-5' )
				-webkit-filter: blur( 5px )
				
				// Accommodate the augmentations from the blur filter.
				padding: 10px
				background-clip: content-box
				
				+mobile
					width: 100%
					left: 0
					padding:
						right: 0
						left: 0
			
		img.poster
			max-width: 185px
			max-height: 244px
			width: 100%
			height: 100%
			position: relative
			z-index: 1
			
		p
			font: italic 1.6em/1.5 Lora, serif
			letter-spacing: -.35px
			margin: .95em 7%
			
			+mobile
				margin:
					right: 12.5%
					left: 12.5%
		
		dl
			text-transform: uppercase
			
			& > dd
				margin-left: 0
			
			&.rating
				margin: 2.25em 0 1.55em
				padding: 5px 0
				border:
					width: 2px 0
					style: dashed
					color: #234f70
					color: rgba( black, .4 )
				+box-shadow( 0 5px 0 0 rgba( black, .1 ) inset, 0 -5px 0 0 rgba( black, .1 ) inset )
				position: relative
				
				& > dt,
				& > dd
					display: inline-block
					+box-sizing( border-box )
					margin: 10px 0
					margin: 1rem 0
			
					html.has-progressbar &
						padding:
							bottom: 25px
							bottom: 2.5rem
						margin:
							bottom: 22px
							bottom: 2.2rem
				
				& > dt
					color: #75a8d0
					color: rgba( white, .3 )
					font-size: 3.2em
					line-height: 1.07
					text-align: center
					margin-top: -0.15ex
					padding-left: 1.5%
					width: 49%
					
					&:first-line
						font-size: .4375em
						
					+mobile
						padding-left: 12.5%
				
				& > dd
					font-size: 5.4em
					line-height: 1
					width: 51%
					white-space: nowrap
					
					+mobile
						padding-right: 12.5%
					
					// @browser Would be more appropriate on <progress> so it can reference the "value" attribute (and drop "data-score"), but Firefox does not render pseudo elements in <progress> tags, yet.
					html.has-progressbar &:before
						content: attr( data-score )
					
					html.has-progressbar &:after
						content: '%'
						display: inline-block
						+scaleX( .8 )
						+transform-origin( left )
			
			&.world-premier
				margin: 1.55em 4.5%
				text-align: center
				background: #619cc9
				background: rgba( white, .2 )
				
				+mobile
					margin:
						right: 12.5%
						left: 12.5%
				
				& > dt,
				& > dd
					background: #3a83bb
				
				& > dt,
				& > dd.country
					color: #88aed1
				
				& > dt
					font-size: 1.4em
					line-height: 1.36
					letter-spacing: 0.03ex
					text-align: center
					display: inline-block
					margin: 0
					padding: 0 .85em
					vertical-align: middle
					
				& > dd
					white-space: nowrap
					
					&.venue
						font-size: 2.7em
						line-height: 1.2
					
					&.country
						font-size: 2.8em
						line-height: 1.35
					
					&.date
						font-size: 3.9em
						line-height: 1
		
		// A <meter> tag may be more appropriate, but the browser styling support is far inferior.
		html.has-progressbar & progress
			+experimental( appearance, none )
			background-color: rgba( white, .2 )
			border: none
			position: absolute
			bottom: 27px
			bottom: 2.7rem
			left: 0
			width: 100%
			height: 8px
			padding: 0 9% 0 6%
			+box-sizing( border-box )
			+background-clip( content-box )
			
			+mobile
				padding:
					right: 12.5%
					left: 12.5%
			
			// @browser IE10
			color: white
			
			&::-webkit-progress-bar
				background-color: rgba( white, .2 )
			
			&::-moz-progress-bar
				background-color: white
			
			&::-webkit-progress-value
				background-color: white
			
	&.border-bottom-line
		color: black
		margin: 0 12.5%
		padding: 11.875% 20.1% 0 0
		background:
			repeat: no-repeat
			position: 8px 0
			size: 75%
			image: url( '//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/heads-up.jpg' )
		position: relative
		z-index: 0  // Underlay <article.film-review> and <article.overflow>
		
		+mobile
			background-size: 100%
			padding-right: 0
			margin-bottom: 5em
		
		// Eyelids
		+respond( '( min-width: 1280px )' )
			html.has-opacity &:after
				content: url( '//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/see-no-evil.png' )
				width: 55px
				height: 14px
				position: absolute
				top: 10.9%
				left: 64.5%
				+opacity( 0 )
				+experimental( animation-name, blink )
				+experimental( animation-duration, 10s )
				+experimental( animation-iteration-count, infinite )
		
		header
			font-family: Oswald, sans-serif
			
			+mobile
				margin: 2.5em 0
		
		h2,
		h3
			font-weight: normal
			line-height: 1
			display: inline-block
			
		h2
			font-size: 8.2em
			letter-spacing: -.001em
			text-transform: uppercase
			margin: .3ex 0 .33ex
			padding-bottom: .25em
			border-bottom: 21px solid
		
		h3
			font-size: 3.9em
			margin: 0 0 .325em
			padding-bottom: .56em
			border-bottom: 3px solid
			
			&:after
				content: '.'
				
				// Hang it
				position: absolute
		
		// Cannot seem to find a (derived) width that will wrap the copy consistently in Firefox and Chrome.
		.immigration-laws
			font: 300 2.2em/1.315 Merriweather, serif
			letter-spacing: -.475px
			padding: 0 1% 0 0
			margin: 0
		
		.law
			display: inline
			
			&:before
				content: '\2022'
				font-size: 41px  // @browser IE8
				font-size: 4.1rem
				line-height: 0
				vertical-align: middle
				margin-right: .25ex
			
			&:first-child:before
				content: none
			
		.country
			font-weight: 900
				
	&.overflow
		margin-top: -2em
		padding: 0 12.5% 7.25em
		background:
			repeat: no-repeat
			position: 62% 0
			size: 82.5%  // @browser IE8 drops the background if background-size is represented in the shorthand notation.
			image: url( '//s3-us-west-2.amazonaws.com/s.cdpn.io/89370/underflow.png' )
		position: relative  // Overlay the previous <article>
		z-index: 1  // Overlay <article.border-bottom-line> and <article.film-review>
		clear: right  // Clear <article.film-review>
		
		+mobile-article
			background-size: 100%
		
		h2
			color: transparent
			font: 8.2em/1 Oswald, sans-serif
			//font-size: 6.1vw
			text-transform: uppercase
			margin: 4.25% 4.75%
			+rotate( 5.5deg )
			+transform-origin( left, top )
			
			html.has-no-csstransforms &
				+opacity( 0 )
			
			&::-moz-selection
				background-color: rgba( #a0b4c0, .5 )
			
			+mobile
				visibility: hidden
				padding: 0
		
		p
			color: #5e6c74
			font: italic 1.6em/1.6 Lora, serif
			
			// @bug Safari does not render fractional letter-spacing lengths (//bugs.webkit.org/show_bug.cgi?id=20606)
			letter-spacing: -.04ex
			
			&:first-of-type
				text-align: right
				width: 72.8%
				margin: 3.3em 0 0 26%
				+rotate( 2.1deg )
				
				+mobile
					margin: 2.5em 0
					width: auto
			
			&:nth-of-type( 2 )
				width: 70%
				margin: -.25em 0 0 .9%
				+rotate( -.73deg )
				
				+mobile
					margin: 2.5em 0
					width: auto
				
			&:nth-of-type( 3 )
				width: 73%
				margin: 1.8em 0 0 12.9%
				+rotate( .94deg )
				
				+mobile
					margin: 2.5em 0
					width: auto
		
			&:last-of-type
				margin-bottom: 0
			
		b
			font-weight: 700
			
.page-footer
	padding: 1.9em 0 5.5em
	margin: 0 12.5% 0
	border-top:
		width: 1px
		style: solid
		color: #ccc
		color: rgba( black, .1 )
	+experimental-value( display, box )
	+experimental-value( display, flex )
	display: -ms-flexbox
	
	.issue-info,
	address
		+experimental( box-flex, 1 )
		+experimental( flex, 1 )
	
	.issue-info
		color: black
		font: 1.7em Lato, sans-serif
		letter-spacing: -.04ex
		margin: 0
		opacity: .6  // @browser Looks like garbage in IE8 with the filter style.
		
	.vol
		color: #8c8c8c
			
	address
		color: #989898
		font: 300 1.3em/1.45 Merriweather, serif
		letter-spacing: -.02ex
		text-align: right
		margin-top: .3em
		
	b
		font-weight: 900
	
	a
		color: inherit
		text-decoration: none
			
.contain-vertical-margins
	&:before,
	&:after
		content: ''
		display: block
		padding-top: 1px
		margin-top: -1px
			
.hanging-punctuation
	position: absolute
	
.sic
	cursor: help
	position: relative
	
	&:after
		content: attr( data-correction )
		line-height: 1
		white-space: nowrap
		position: absolute
		left: -2px
		top: -2px
		padding: .25ex .4ex
		margin-left: -.4ex
		border: 2px solid lightblue
		border-radius: .7ex
		+box-shadow( 0 0 3px lightblue )
		background-color: white
		+opacity( 0 )
		+transition( opacity 100ms )
		
		// @browser IE8 does not apply filters to pseudo elements.
		html.has-no-opacity &
			content: none
		
	&:hover:after
		+opacity( 1 )
		
+keyframes( blink )
	from
		opacity: 0
	
	24%
		opacity: 0
	
	25%
		opacity: 1
	
	26%
		opacity: 0
	
	99%
		opacity: 0
		
	to
		opacity: 1