/*! CJCid layout
    Author: Chris Cid
    URI: www.cjcid.com
—————————————————————— */

body { margin: 0; padding: .25em; }

.inner { padding: 2em; }
.inner > * { margin: 0 auto; max-width: 25em; overflow-x: hidden; }

@supports (display: grid) {
	.inner { padding: 0; min-height: calc(100vh - .5em); display: grid; }
	.inner > * { margin: 0; max-width: none; }
}

.footer { grid-row: 3 / 4; }

main { padding-top: 3rem; }
img { border-style: none; }
hr { margin: 2em 0; }
blockquote { position: relative; z-index: 0; margin-left: 0; padding-left: 1em; }
blockquote::before { content: ''; position: absolute; top: 0; bottom: 0; left: -.5em; width: .5em; }
blockquote.full-width { margin-left: .5em; }
pre { padding-left: .5em; border-left: 1em solid transparent; }
table { border-collapse: collapse; }
caption { margin-bottom: .5em; }
th,
td { padding: .5em; vertical-align: top; }
thead th,
tbody th,
tbody td { padding-bottom: .25em; border-bottom: .015em solid transparent; }
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: none; }
table p,
table ul,
table ol { margin-top: 0; }
figure img { display: block; margin-bottom: .5em; width: 100%; }
figure,
table { margin: 1em 0 2.5em; }

.full-width img { max-width: calc(100vw - .5em); }
.full-width figcaption { padding: 0 7vw; width: calc(86vw - .5em); }
.ratio-golden { aspect-ratio: 16 / 10; }

.header,
.footer,
.primal { display: grid; grid-template-columns: 1fr minmax(2.5em, 4fr) minmax(auto, 30em) 1fr 2fr; grid-gap: .5em; }

.logo,
.logo-cjcid,
.main-navigation a,
.main-navigation svg { display: inline-block; }

.logo { white-space: normal; }
.header { min-height: 3.5rem; }
.logo-cjcid {
	width: 2.25rem; height: 2.25rem; padding: .15em; border-radius: 50%; border: .02em solid transparent;
	-webkit-backdrop-filter: blur(.15em);
	        backdrop-filter: blur(.15em);
}

.main-navigation { grid-column: 3; }
.main-navigation ul { list-style-type: none; margin: 0; padding-left: 0; }
.main-navigation li { display: inline; padding: 0 .25em;  }
.main-navigation a { text-decoration: none; white-space: normal; text-align: center; }
.main-navigation figure { margin: .25em 0 .5em; }
.main-navigation svg { width: 2rem; height: 2rem; }
.main-navigation figcaption { display: block; }

@supports (display: flex) {
	.logo { position: fixed; z-index: 3; top: .65em; left: .5em; }
	.logo-cjcid { display: block; }
	.main-navigation ul { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 50em) {
	.main-navigation ul { justify-content: space-evenly; align-items: end; }
}

.items-navigation { margin-top: 2em; }
.home-lists .items-navigation { margin-bottom: 3em; }
.items-navigation ol { margin: 0; padding-left: 0; list-style-type: none; }
.items-navigation li { margin-bottom: 5em; }
.items-navigation.products a { display: block; text-decoration: none; white-space: normal; }
.items-navigation.products a h2,
.home-lists .items-navigation.products a strong { text-decoration: underline; }
.home-lists .items-navigation li { margin-bottom: 1.5em; font-size: 1.25em; }
.items-navigation h2 { margin: 0; }
.items-navigation figure { margin: 0; }
.items-navigation footer { margin: .5em 0; font-size: .75em; }

.primal .column,
.primal footer { grid-column: 3; }
.primal hgroup { grid-column: 2 / 5; }
.primal .full-width { grid-column: 1 / -1; max-width: none; }

.footer { margin-top: 2em; text-align: center; }
.footer small { padding: 1em 0; grid-column: 2 / 5; text-align: center; border-top: .015em solid transparent; }
.footer span,
.footer strong { white-space: nowrap; }
.icon-sagari-fuji { margin: 0 2vw; width: 1.5rem; vertical-align: -.45rem; }

.kicker { margin-bottom: .5em; }
.primal > hgroup h1 { margin: .1em 0 0; }
.primal > hgroup h1 + h2,
.primal > hgroup h1 + p { margin-top: .5em; }

a[rel~=noopener]::after { content: ' ⸃'; }

.icon-library { display: none; }