/*
 * koheiishida.com
 *
 *  1. Fonts
 *  2. Page structure (and the spacing values used everywhere: --side, --top, --section)
 *  3. Header
 *  4. Columns, images, galleries, icons
 *  5. Overlay pages and the image viewer
 *  6. Text
 *  7. Pages
 */


/* 1. Fonts ------------------------------------------------------------------
 * Mona Sans (SIL Open Font License, see assets/fonts/OFL.txt). It has width
 * and weight axes; the widths and weights used are set in "6. Text".
 * To try another font, add its @font-face rules here and put its name first
 * in the two variables below.
 */

@font-face {
	font-family: "Mona Sans";
	font-style: normal;
	font-weight: 200 900;
	font-stretch: 75% 125%;
	font-display: swap;
	src: url("/assets/fonts/mona-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Mona Sans";
	font-style: normal;
	font-weight: 200 900;
	font-stretch: 75% 125%;
	font-display: swap;
	src: url("/assets/fonts/mona-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Mona Sans";
	font-style: italic;
	font-weight: 200 900;
	font-stretch: 75% 125%;
	font-display: swap;
	src: url("/assets/fonts/mona-sans-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Mona Sans";
	font-style: italic;
	font-weight: 200 900;
	font-stretch: 75% 125%;
	font-display: swap;
	src: url("/assets/fonts/mona-sans-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Was "Diatype Condensed Variable" on Cargo. */
	--font-condensed: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
	/* Was "Diatype Variable". */
	--font-sans: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
}


/* 2. Page structure -----------------------------------------------------------
 * 1rem follows the window size (set by the script in <head>), so the spacing
 * and columns scale with the screen like they did on Cargo. Text sizes are
 * fixed in px (6. Text). The script also sets:
 *   html.mobile      phones and portrait tablets (slightly larger spacing, no grey strip above pages)
 *   html.one-column  mobile, and any window narrower than 1100px: one column, full-width images
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	--base-size: 12.96px;
	--viewport-height: 100vh;
	--mobile-scale: 1.07;

	/* Spacing used on every page. */
	--side: 1.8rem;    /* left and right margin */
	--top: 2.6rem;     /* above the first line: the name, page titles */
	--section: 4rem;   /* between blocks: under the header, between works, page ends */

	font-size: var(--base-size);
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	touch-action: manipulation;
}

html.mobile {
	--top: 2rem;
	font-size: calc(var(--base-size) * var(--mobile-scale));
}

html,
body {
	min-height: var(--viewport-height);
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	background-color: #efefef;
}

:focus:not(:focus-visible) {
	outline: 0;
}

.content {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 100%;
	border-color: transparent;
	border-width: 0;
}

.page {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	width: 100%;
	max-width: 100%;
}

html.one-column .page {
	flex-wrap: wrap;
}

.page-layout {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	align-items: flex-start;
	justify-content: flex-start;
	width: 0%;
}

.page-content {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	border-color: transparent;
	border-width: 0;
}

html.mobile .page-layout {
	max-width: 100%;
	padding: 0;
}

bodycopy {
	--font-scale: 1;
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-wrap: break-word;
}

/* Text styles below set --font-size; style="--font-scale: 0.8" scales a piece of text. */
bodycopy,
bodycopy * {
	font-size: calc(var(--font-scale) * var(--font-size));
}

bodycopy * {
	border-width: 0;
}

b,
strong {
	font-weight: bolder;
}


/* 3. Header -------------------------------------------------------------------
 * The name stays at the top of the window. Contact and CV quickly slide up
 * under it when scrolling down and come back when scrolling up (site.js sets
 * html.header-collapsed). Both bars use the page background colour, so the
 * header never reads as a separate strip.
 */

.site-header {
	--header-gap: 1.2rem;
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	/* The gap padding below the links overlaps the empty top of the page under it. */
	margin-bottom: calc(-1 * var(--header-gap));
	pointer-events: none;
}

.site-header-name,
.site-header-links {
	position: relative;
	padding: 0 var(--side);
	background-color: #efefef;
	pointer-events: auto;
}

.site-header-name {
	padding-top: var(--top);
}

.site-header-links {
	/* A little space between the name and Contact. The bar is also tucked 1px
	   under the name's bar so no hairline shows where the two meet. */
	margin-top: -1px;
	padding-top: calc(0.6em + 1px);
	padding-bottom: var(--header-gap);
}

.site-header-name {
	z-index: 2;
}

.site-header .site-header-name a {
	color: inherit;
}

.site-header-links {
	z-index: 1;
	transition: transform 0.2s ease-out;
}

/* The links slide up under the name. The bottom --header-gap of the bar
   (empty padding) stays visible as a little space below the name. */
html.header-collapsed .site-header-links {
	transform: translateY(calc(-100% + var(--header-gap)));
	pointer-events: none;
}

/* Keyboard users tabbing into the header always see the links. */
.site-header:focus-within .site-header-links {
	transform: none;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.site-header-links {
		transition: none;
	}
}


/* 4. Columns, images, galleries, icons -------------------------------------- */

/* <column-set> is a 12 column row; <column-unit span="5"> takes 5 of them
 * (style="--span: 7.5" for a width between two columns).
 * style="--gutter: 1rem; --mobile-gutter: 4rem" sets the space between units.
 * In one-column mode the units stack, unless the set has mobile-stack="false". */
column-set {
	--g: var(--gutter, 1rem);
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	clear: both;
	margin-top: calc(var(--gutter-expand, 0) * var(--g));
}

html.one-column column-set {
	--g: var(--mobile-gutter, var(--gutter, 1rem));
}

column-set + *,
media-item + * {
	--gutter-expand: 1;
}

column-unit > :first-child {
	--gutter-expand: 0;
}

column-unit {
	--span: 12;
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: calc(var(--span) * (100% + var(--g)) / 12 - var(--g));
	min-width: 0;
	max-width: 100%;
	margin-right: var(--g);
	overflow-wrap: break-word;
}

column-unit:last-child {
	flex-grow: 1;
	margin-right: 0;
}

column-unit[span="1"] { --span: 1; }
column-unit[span="2"] { --span: 2; }
column-unit[span="3"] { --span: 3; }
column-unit[span="4"] { --span: 4; }
column-unit[span="5"] { --span: 5; }
column-unit[span="6"] { --span: 6; }
column-unit[span="7"] { --span: 7; }
column-unit[span="8"] { --span: 8; }
column-unit[span="9"] { --span: 9; }
column-unit[span="10"] { --span: 10; }
column-unit[span="11"] { --span: 11; }
column-unit[span="12"] { --span: 12; }

html.one-column column-set:not([mobile-stack="false"]) {
	flex-direction: column;
	row-gap: var(--g);
}

html.one-column column-set:not([mobile-stack="false"]) > column-unit {
	width: 100%;
	flex-grow: 0;
	margin-right: 0;
}

html.one-column column-set:not([mobile-stack="false"]) > column-unit:empty {
	display: none;
}

/* <media-item> holds one image. style="--scale: 0.5" makes it half the column width.
 * class="zoomable" opens it full screen on click. */
media-item {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	vertical-align: bottom;
	width: 100%;
	max-width: calc(var(--scale, 1) * 100%);
}

media-item img {
	display: block;
	width: 100%;
	height: auto;
}

media-item > a {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

media-item.zoomable img {
	cursor: zoom-in;
}

/* <gallery-justify> lines images up in rows of equal height (laid out by site.js).
 * row-height is relative to the gallery width; gutter is "horizontal vertical";
 * justify-row-end="true" on a media-item ends a row there. */
gallery-justify {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
}

gallery-justify .justify-row {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
}

gallery-justify media-item {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	max-width: 100%;
}

gallery-justify .justify-row img {
	height: var(--row-height, auto);
	object-fit: cover;
}

/* <gallery-freeform> places an image by percentage of the gallery width. */
gallery-freeform {
	position: relative;
	display: block;
	width: 100%;
}

gallery-freeform > media-item {
	display: flex;
	width: calc(var(--freeform-scale, 100) * 1%);
	max-width: 100%;
	margin-left: calc(var(--freeform-x, 0) * 1%);
	margin-top: calc(var(--freeform-y, 0) * 1%);
}

html.one-column gallery-freeform > media-item {
	width: 100%;
	margin-left: 0;
	margin-top: 0;
}

html.one-column gallery-freeform > media-item + media-item {
	margin-top: var(--mobile-gutter, 1rem);
}

/* <text-icon icon="north-east-arrow"> draws a small icon in the text colour. */
text-icon {
	position: relative;
	display: inline-block;
	width: auto;
	height: 1.2em;
	aspect-ratio: 1;
	margin-top: -1em;
	margin-bottom: -0.25em;
	vertical-align: baseline;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

text-icon[icon="north-east-arrow"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 24 23 9M12 8.5h11.5V20' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}

text-icon[icon="close"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 9l14 14M23 9 9 23' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}

text-icon[icon="downwards-arrow-5"] {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 6v19M9 18l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}


/* 5. Overlay pages and the image viewer ---------------------------------------
 * Every project page is a hidden .overlay-content in index.html; site.js shows
 * the one that matches the address (/mingei, /cv, ...).
 */

.overlay-content {
	--viewport-height: 100dvh;
	position: fixed;
	inset: 0;
	z-index: 999;
	max-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: none;
	scrollbar-width: none;
}

.overlay-content::-webkit-scrollbar {
	display: none;
}

.overlay-content[hidden] {
	display: none;
}

.overlay-content:focus {
	outline: none;
}

.overlay-content .page-layout {
	min-height: fit-content;
}

.overlay-content.is-opening .page {
	animation: overlay-dim-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.overlay-content.is-opening .page-content {
	animation: overlay-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.overlay-content.is-closing {
	pointer-events: none;
}

.overlay-content.is-closing .page {
	animation: overlay-fade-out 0.5s ease-in-out both;
}

@keyframes overlay-dim-in {
	from { background-color: transparent; }
}

@keyframes overlay-slide-in {
	from { transform: translate3d(0, 100vh, 0); }
}

@keyframes overlay-fade-out {
	to { opacity: 0; }
}

html.quick-view-open,
html.quick-view-open body,
html.quick-view-open .overlay-content {
	overflow: hidden;
}

.quick-view {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem;
	opacity: 0;
	transition: opacity 0.2s ease;
	touch-action: none;
}

html.mobile .quick-view {
	padding: 10px;
}

.quick-view.is-visible {
	opacity: 1;
}

.quick-view:focus {
	outline: none;
}

.quick-view[hidden] {
	display: none;
}

.quick-view-background {
	position: absolute;
	inset: 0;
	background-color: #fff;
}

.quick-view-image {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.quick-view-button {
	position: absolute;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(87, 87, 87, 0.35);
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
}

.quick-view-button:active {
	opacity: 0.7;
}

.quick-view-button[hidden] {
	display: none;
}

.quick-view-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / 14px no-repeat;
	mask: var(--icon) center / 14px no-repeat;
}

.quick-view-close {
	top: 20px;
	right: 20px;
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 1.5l11 11M12.5 1.5l-11 11' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

.quick-view-prev,
.quick-view-next {
	top: 50%;
	margin-top: -15px;
}

.quick-view-prev {
	left: 20px;
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M9 1.5 3.5 7 9 12.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

.quick-view-next {
	right: 20px;
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 1.5 10.5 7 5 12.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

html.mobile .quick-view-close {
	top: 10px;
	right: 10px;
}

html.mobile .quick-view-prev {
	left: 10px;
}

html.mobile .quick-view-next {
	right: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.quick-view {
		transition: none;
	}
}


/* 6. Text ---------------------------------------------------------------------
 * Three styles of Mona Sans; font-stretch and font-weight pick a point on
 * the font's width and weight axes.
 *
 *   body text   15.8px              width 89%     weight 445
 *   .heading    17px                width 85%     weight 540   the name, titles
 *   .note       16/22 of the body   width 101.7%  weight 683   notes in long text
 *
 * The weights are heavier than the Google Fonts specimen (435 / 492 / 663),
 * which looks light at these small sizes, and body text and headings are a
 * little narrower than its 91.8% / 87.9%.
 *
 * The sizes are in px, so text stays the same size on every screen while the
 * spacing (in rem) follows the window.
 * --leading is the line height; spacing between paragraphs and images is
 * counted in lines of it.
 */

bodycopy {
	--font-size: 15.8px;
	--leading: 1.5;
	font-family: var(--font-condensed);
	font-stretch: 89%;
	font-weight: 445;
	font-style: normal;
	line-height: var(--leading);
	letter-spacing: 0;
	color: #000;
}

/* The header and the home page are a little more open. Page titles use the
   same line height, so they stay level with the name in the header. */
.site-header bodycopy,
[id="home"] bodycopy,
.title-row {
	--leading: 1.65;
	line-height: var(--leading);
}

.site-header-name {
	text-transform: uppercase;
}

/* Headings are 17px next to 15.8px body text. A heading line is exactly as
   tall as a line of body text, so the header and the page titles keep their
   height and alignment. */
.heading {
	--heading-scale: calc(17 / 15.8);
	--font-scale: var(--heading-scale);
	font-stretch: 85%;
	font-weight: 540;
	line-height: calc(var(--leading) / var(--heading-scale));
}

/* <div class="note">…</div> for notes and annotations in long text. */
.note {
	--font-scale: 0.7273;
	display: block;
	font-stretch: 101.7%;
	font-weight: 683;
	line-height: 1.45;
}

bodycopy a {
	color: inherit;
	text-decoration: none;
}

/* A link's icon stays on the same line as its words. */
a:has(> text-icon) {
	white-space: nowrap;
}

/* Links inside text (descriptions, CV, contact) are underlined. */
.info a,
.cv-list a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:active,
media-item.linked:active,
media-item.zoomable img:active {
	opacity: 0.7;
}

/* A caption sits just under its image. */
.caption {
	display: block;
	margin-top: 0.5em;
}


/* 7. Pages --------------------------------------------------------------------- */

/* Home: the works in one column under the header. */
[id="home"].page,
[id="not-found"].page {
	min-height: var(--viewport-height);
}

[id="home"] .page-layout,
[id="not-found"] .page-layout {
	padding: 0;
}

[id="home"] .page-content,
[id="not-found"] .page-content {
	padding: var(--section) var(--side) calc(var(--section) * 2);
}

[id="home"] media-item {
	display: flex;
}

[id="home"] media-item + media-item {
	margin-top: var(--section);
}

/* Pages that open on top of the home page: a white sheet with the title and
   Close on the first line (level with the name in the header), then text on
   the left and images on the right. In one-column mode the images go under
   the text. */
.overlay-content .page {
	min-height: var(--viewport-height);
	background-color: rgba(0, 0, 0, 0.1);
}

.overlay-content .page-layout {
	padding: 2rem 0 0;
}

.overlay-content .page-content {
	padding: calc(var(--top) - 2rem) var(--side) var(--section);
	background-color: #fff;
}

html.mobile .overlay-content .page-content {
	padding-top: var(--top);
}

.title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: calc(var(--leading) * 1em);
}

/* Images run down the right side to the right margin, two lines apart.
   Landscape images fill the column. Portrait ones take two thirds of it and
   sit against the right edge, never taller than the window
   (--ratio is the image's width / height). */
.images > * + * {
	margin-top: calc(var(--leading) * 2em);
}

/* Next to text, the first image starts level with the top of its capitals. */
html:not(.one-column) .images {
	padding-top: calc(0.66em - (2.05 - var(--leading)) * 0.5em);
}

.images > media-item {
	display: flex;
}

.images > media-item.portrait {
	width: min(calc(100% * 2 / 3), calc(var(--ratio, 0.75) * 100vh));
	margin-left: auto;
}

/* One column: images full width, and the first one comes straight after the
   title, before the text, so the work is the first thing you see. */
html.one-column .images {
	display: contents;
}

html.one-column .images > * {
	margin-top: 0;
}

html.one-column .images > :first-child {
	order: -1;
}

html.one-column .images > media-item.portrait {
	width: min(100%, calc(var(--ratio, 0.75) * (100vh - 2 * var(--section))));
	margin-left: 0;
}

/* CV: year on the left, entry on the right. The first row is level with the
   text beside it; a little space between rows keeps a wrapped entry together. */
.cv-list {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	column-gap: 1rem;
	row-gap: 0.4em;
	margin: 0;
}

.cv-list dt,
.cv-list dd {
	margin: 0;
}