/* ==========================================================================
   Writings: the /writings index and each piece under it.
   Scoped to .je-wr (added to the page's outer .je-page group). Reads the
   shared tokens on :root in style.css; adds one face, Courier Prime, for the
   screenplay title pages and extracts.
   Layout concept: Julie's scripts shown as scripts. A typed title page held
   by two brass brads, and the opening scene set to industry page format.
   ========================================================================== */

.je-wr {
	--je-sheet: #fffdf8;
	--je-sheet-edge: #e6dfd1;
	--je-brass: #b38b45;
	--je-brass-deep: #7d5f2b;
	--je-courier: 'Courier Prime', 'Courier New', Courier, monospace;
}

/* Flow-layout margins off inside the custom grids; they use gap instead. */
.je-wr .je-wr-grid > *,
.je-wr .je-titlepage > *,
.je-wr .je-script > *,
.je-wr .je-wr-entry > *,
.je-wr .je-wr-entry-text > *,
.je-wr .je-wr-details > *,
.je-wr .je-wr-detail > * { margin-block: 0 !important; }

/* Label line may carry a link back to the index. */
.je-wr .je-page-label a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--je-line); }
.je-wr .je-page-label a:hover { color: var(--je-green); border-color: var(--je-green); }

/* --------------------------------------------------------------------------
   Title page: a typed screenplay cover, held by two brads.
   -------------------------------------------------------------------------- */
.je-wr .je-titlepage {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	align-content: stretch;
	aspect-ratio: 8.5 / 11;
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	padding: 18% 12% 9% 16%;
	background: var(--je-sheet);
	border: 1px solid var(--je-sheet-edge);
	box-shadow: 0 1px 0 var(--je-sheet-edge), 0 18px 40px -22px rgba(45, 40, 28, .35);
	font-family: var(--je-courier);
	color: var(--je-ink);
	container-type: inline-size;
	transform: rotate(-1.2deg);
	transition: transform .5s cubic-bezier(.2, .7, .1, 1), box-shadow .5s;
}
/* Brads in the top and bottom holes, as on a three-hole-punched script. */
.je-wr .je-titlepage::before,
.je-wr .je-titlepage::after {
	content: "";
	position: absolute;
	left: 5.5%;
	width: 4.2cqi;
	height: 4.2cqi;
	min-width: 9px;
	min-height: 9px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #e9cf94 0, var(--je-brass) 45%, var(--je-brass-deep) 100%);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.je-wr .je-titlepage::before { top: 11%; }
.je-wr .je-titlepage::after { bottom: 11%; }
.je-wr .je-tp-centre { display: grid; align-content: center; justify-items: center; gap: .6em; text-align: center; }
.je-wr .je-tp-centre > * { margin: 0 !important; }
.je-wr .je-tp-title {
	font-family: var(--je-courier) !important;
	font-size: clamp(.85rem, 7.4cqi, 1.55rem) !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3 !important;
	color: var(--je-ink) !important;
	max-width: none !important;
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}
.je-wr .je-tp-by,
.je-wr .je-tp-author,
.je-wr .je-tp-contact {
	font-family: var(--je-courier) !important;
	font-size: clamp(.6rem, 4.3cqi, .95rem) !important;
	line-height: 1.5 !important;
	color: var(--je-ink) !important;
	max-width: none !important;
}
.je-wr .je-tp-by { margin-top: 1.4em !important; }
.je-wr .je-tp-contact { text-align: left; font-size: clamp(.5rem, 3.4cqi, .8rem) !important; color: var(--je-muted) !important; margin: 0 !important; }

/* --------------------------------------------------------------------------
   Index: one entry per piece.
   -------------------------------------------------------------------------- */
.je-wr .je-wr-list { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4rem) !important; border-top: 1px solid var(--je-ink); padding-top: clamp(2rem, 4vw, 3rem); }
.je-wr .je-wr-entry {
	position: relative;
	display: grid;
	grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
	gap: clamp(1.75rem, 5vw, 4rem);
	align-items: center;
}
.je-wr .je-wr-entry .je-titlepage { max-width: 230px; }
.je-wr .je-wr-entry:hover .je-titlepage { transform: rotate(0deg) translateY(-4px); box-shadow: 0 1px 0 var(--je-sheet-edge), 0 26px 50px -24px rgba(45, 40, 28, .45); }
.je-wr .je-wr-entry-text { display: grid; gap: 1rem; min-width: 0; max-width: 620px; }
.je-wr .je-wr-meta { font-family: var(--je-mono) !important; font-size: .7rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--je-green) !important; line-height: 1.6 !important; }
.je-wr .je-wr-title { font-family: var(--je-display) !important; font-size: clamp(2.2rem, 4.6vw, 3.4rem) !important; font-weight: 300 !important; line-height: 1 !important; letter-spacing: -.02em; margin: 0 !important; }
.je-wr .je-wr-title a { color: var(--je-ink); text-decoration: none; }
/* Whole entry is the link target. */
.je-wr .je-wr-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.je-wr .je-wr-entry:hover .je-wr-title a { color: var(--je-green); }
.je-wr .je-wr-logline { font-family: var(--je-display) !important; font-size: clamp(1.15rem, 1.9vw, 1.35rem) !important; font-weight: 300; line-height: 1.5 !important; color: var(--je-ink) !important; max-width: 36em; }
.je-wr .je-wr-go { font-family: var(--je-sans) !important; font-size: .95rem !important; font-weight: 500; color: var(--je-ink) !important; }
.je-wr .je-wr-go::after { content: " \2192"; display: inline-block; transition: transform .3s; }
.je-wr .je-wr-entry:hover .je-wr-go::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   A piece: hero with logline, details and the title page.
   -------------------------------------------------------------------------- */
.je-wr .je-wr-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(220px, 1fr);
	gap: clamp(2rem, 6vw, 5.5rem);
	align-items: start;
}
.je-wr .je-wr-hero .je-page-title { margin-bottom: clamp(1.25rem, 3vw, 2rem) !important; }
.je-wr .je-wr-hero .je-wr-logline { font-size: clamp(1.3rem, 2.3vw, 1.7rem) !important; line-height: 1.42 !important; margin-top: 0 !important; }
.je-wr .je-wr-hero .je-titlepage { justify-self: end; margin-top: clamp(0rem, 3vw, 2.5rem) !important; }
.je-wr .je-wr-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--je-ink);
	margin-top: clamp(2rem, 4vw, 2.75rem) !important;
	max-width: 680px;
}
.je-wr .je-wr-detail { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.2rem 1.1rem 0; border-bottom: 1px solid var(--je-line); min-width: 0; }
.je-wr .je-wr-detail:nth-child(even) { padding-left: 1.2rem; padding-right: 0; border-left: 1px solid var(--je-line); }
.je-wr .je-wr-detail-label { font-family: var(--je-mono) !important; font-size: .64rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--je-muted) !important; line-height: 1.5 !important; }
.je-wr .je-wr-detail-value { font-family: var(--je-display) !important; font-size: 1.1rem !important; line-height: 1.4 !important; color: var(--je-ink) !important; }

.je-wr .je-wr-synopsis { margin-top: clamp(3rem, 6vw, 4.5rem) !important; }
.je-wr .je-wr-synopsis .je-section-label { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   Script extract: a page of screenplay in standard format.
   Courier at 10 characters to the inch: action is 60 characters wide,
   dialogue starts 10 in and runs 35, parentheticals start 16 in,
   character cues start 22 in. The sheet scales with its em size.
   -------------------------------------------------------------------------- */
.je-wr .je-wr-extract { margin-top: clamp(3rem, 6vw, 4.5rem) !important; }
.je-wr .je-wr-extract .je-section-label { margin-top: 0 !important; }
.je-wr .je-wr-extract-note { font-family: var(--je-sans) !important; font-size: .95rem !important; color: var(--je-muted) !important; margin-top: .3rem !important; }
.je-wr .je-script {
	--sp-size: clamp(13px, 1.32vw, 16px);
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--sp-size) * 46);
	margin-top: 1.6rem !important;
	padding: calc(var(--sp-size) * 4.5) calc(var(--sp-size) * 4) calc(var(--sp-size) * 5.5) calc(var(--sp-size) * 6);
	background: var(--je-sheet);
	border: 1px solid var(--je-sheet-edge);
	box-shadow: 0 1px 0 var(--je-sheet-edge), 0 24px 50px -30px rgba(45, 40, 28, .35);
	font-family: var(--je-courier);
	font-size: var(--sp-size);
	line-height: 1.25;
	color: var(--je-ink);
	overflow: hidden;
}
.je-wr .je-script p {
	font-family: var(--je-courier) !important;
	font-size: 1em !important;
	line-height: 1.25 !important;
	color: var(--je-ink) !important;
	max-width: 36em;
	margin: 0 0 1.25em !important;
	text-wrap: wrap;
}
.je-wr .je-script .je-sp-pagenum { position: absolute; top: calc(var(--sp-size) * 2); right: calc(var(--sp-size) * 4); margin: 0 !important; }
.je-wr .je-script .je-sp-scene { text-transform: uppercase; font-weight: 700; margin-top: 0 !important; }
.je-wr .je-script .je-sp-title { text-align: center; text-transform: uppercase; text-decoration: underline; text-underline-offset: .2em; max-width: 36em; }
.je-wr .je-script .je-sp-char { margin: 0 !important; padding-left: 13.2em; text-transform: uppercase; }
.je-wr .je-script .je-sp-paren { margin: 0 !important; padding-left: 9.6em; max-width: 25em; }
.je-wr .je-script .je-sp-dial { padding-left: 6em; max-width: 27em; }
/* The extract fades out at the foot of the page. */
.je-wr .je-script::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--sp-size) * 9);
	background: linear-gradient(to bottom, rgba(255, 253, 248, 0), var(--je-sheet) 72%);
	pointer-events: none;
}
.je-wr .je-script .je-sp-end {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--sp-size) * 1.6);
	z-index: 1;
	margin: 0 !important;
	max-width: none;
	text-align: center;
	font-family: var(--je-mono) !important;
	font-size: .66rem !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--je-muted) !important;
}

/* Closing request uses the shared .je-page-cta, plus a short note. */
.je-wr .je-wr-cta-note { font-family: var(--je-sans) !important; font-size: 1.0625rem !important; line-height: 1.6 !important; color: var(--je-ink) !important; max-width: 34em; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.je-wr .je-wr-hero { grid-template-columns: minmax(0, 1fr); }
	.je-wr .je-wr-hero .je-titlepage { justify-self: start; max-width: 260px; margin-top: 0 !important; order: -1; }
}
@media (max-width: 600px) {
	.je-wr .je-wr-entry { grid-template-columns: minmax(0, 1fr); }
	.je-wr .je-wr-entry .je-titlepage { max-width: 190px; }
	.je-wr .je-script {
		--sp-size: 13px;
		padding: 3.2em 1.4em 5em 1.6em;
	}
	/* Keep the shape of the format on a phone without the fixed indents. */
	.je-wr .je-script .je-sp-char { padding-left: 34%; }
	.je-wr .je-script .je-sp-paren { padding-left: 24%; }
	.je-wr .je-script .je-sp-dial { padding-left: 12%; padding-right: 6%; }
	.je-wr .je-script .je-sp-pagenum { right: 1.4em; top: 1.2em; }
}
@media (max-width: 400px) {
	.je-wr .je-wr-details { grid-template-columns: minmax(0, 1fr); }
	.je-wr .je-wr-detail:nth-child(even) { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.je-wr .je-titlepage { transition: none; }
}