/*
 * Every page that is not the landing page, in its look (inc/shell.php). Only
 * the landing page's own tokens are used: its paper, ink, coral, faces and
 * paper shadow, so a change to the concept carries here through the port.
 */

.shell { position: relative; padding: clamp(128px, 16vh, 168px) 0 clamp(80px, 12vh, 130px); min-height: 70vh; }
.shell-wrap { max-width: 860px; }
.shell-hd { margin: 0 0 34px; }
.shell-hd h1 { margin: 10px 0 0; font: 800 clamp(2.4rem, 5vw, 4rem)/.98 var(--sans); font-stretch: 108%; letter-spacing: -.04em; text-wrap: balance; }
.shell-hd .sub { margin: 16px 0 0; max-width: 60ch; color: var(--ink-2); font-size: 18px; line-height: 1.55; }

.shell-sheet { position: relative; padding: clamp(26px, 5vw, 54px) clamp(22px, 5vw, 60px); }
.shell-sheet > .tape { top: -15px; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.shell-sheet h2 { margin: 34px 0 10px; font: 800 clamp(1.4rem, 2.4vw, 1.75rem)/1.15 var(--sans); letter-spacing: -.02em; }
.shell-sheet h2:first-child { margin-top: 0; }
.shell-sheet h3 { margin: 24px 0 8px; font: 700 18px/1.3 var(--sans); }
.shell-sheet p, .shell-sheet li { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.shell-sheet p { margin: 0 0 14px; }
.shell-sheet ul { margin: 0 0 16px; padding-left: 1.2em; }
.shell-sheet li { margin: 0 0 6px; }
.shell-sheet a { color: var(--coral-deep); text-underline-offset: 3px; }
.shell-sheet a:hover { color: var(--ink); }
.shell-sheet strong { color: var(--ink); }

@media (max-width: 600px) {
	.shell { padding-top: 112px; }
	.shell-sheet p, .shell-sheet li { font-size: 16px; }
}

/* the page a visitor is on is marked (aria-current: inc/shell.php in the header, menu.js in the drawer), and landing.css draws it */