/*
Theme Name: Lindsay Lewis
Author: James Sui
Author URI: https://jamessui.com/
*/

@font-face {
  font-family: 'MaisonNeueWEB';
  src:  url('fonts/MaisonNeueWEB-Medium.woff2') format('woff2'),
        url('fonts/MaisonNeueWEB-Medium.woff') format('woff');
}

/* resets
--------------------------------------------------------------------------
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; line-height: 1; overflow-y: scroll; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
progress { vertical-align: baseline; }
[hidden], template { display: none; }

svg:not(:root) { overflow: hidden; }

img, iframe { border: 0; vertical-align: middle; }

strong { font-weight: bolder; }
em { font-style: italic; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

button, input, optgroup, select, textarea { margin: 0; font: inherit; font-size: 100%; line-height: 1; vertical-align: baseline; color: inherit; outline: 0; border-radius: 0; }
button, input, textarea { padding: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
label, button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; }
button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; }
button[disabled], input[disabled] { cursor: default; }
button { width: auto; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border: 0; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { font-weight: normal; text-align: left; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

ul, ol { list-style: none; }
li { display: list-item; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

a { color: #000; background: transparent; text-decoration: none; cursor: pointer; text-decoration-skip: ink; }
a:hover { opacity: 0.5; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }

.hide { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }

a, span, button { transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease, text-decoration-color 0.4s ease; }

/* global
--------------------------------------------------------------------------
*/

body { font: 62.5%/1 MaisonNeueWEB, 'Helvetica Neue', Arial, Helvetica, sans-serif; background: #fff; color: #000; }

/* mobile width: 320px */

body > header { width: 100%; padding: 15px; background: #fff; color: #000; position: fixed; top: 0; left: 0; z-index: 99; }
body > header h1 { font-size: 14px; letter-spacing: 0.06em; }
body > header h1 a span { display: none; }
html.nav body > header > ul li button span::before,
html.nav body > header > ul li button span::after { top: 50%; transform: rotate(45deg); }
html.nav body > header > ul li button span::after { transform: rotate(-45deg); }
body > header nav ul { font-size: 14px; letter-spacing: 0.06em; display: flex; justify-content: space-between; }
body > header nav ul li.on a { color: #00f; }

@media only screen and (min-width: 1020px) {
	body > header { padding: 12px 18px; }
	body > header h1 { font-size: 10px; letter-spacing: 0.06em; }
	body > header h1 a span { display: inline; }
}

@media only screen and (min-width: 1020px) {
	body > header { padding: 1.176vw 1.765vw; }
	body > header h1 { font-size: 0.98vw; }
	body > header nav ul { font-size: 0.98vw; }
}

main { min-height: 100vh; display: flex; flex-direction: column; }

main .slides { z-index: 1; }
main .slides .slick-arrow { width: 50%; height: 100%; background: none; border: 0; position: absolute; top: 0; left: 0; z-index: 100; }
main .slides .slick-next { left: 50%; }
main .slides figure { height: 100vh; height: 100dvh; padding: 60px 15px; position: relative; }
main .slides figure img { width: 100%; height: 100%; object-fit: contain; }
main .slides figure figcaption { width: 100%; padding: 15px; font-size: 14px; letter-spacing: 0.06em; position: absolute; bottom: 0; left: 0; }

@media only screen and (min-width: 1020px) {
	main .slides figure { padding: 80px 18px; }
	main .slides figure figcaption { padding: 1.2em 1.8em; font-size: 10px; }
}

@media only screen and (min-width: 1020px) {
	main .slides figure { padding: 7.84vw 1.765vw; }
	main .slides figure figcaption { font-size: 0.98vw; }
}

main .captions { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 2; }
main .captions .slide { width: 100%; padding: 15px; font-size: 14px; letter-spacing: 0.06em; }

@media only screen and (min-width: 1020px) {
	main .captions .slide { padding: 1.2em 1.8em; font-size: 10px; }
}

@media only screen and (min-width: 1020px) {
	main .captions .slide { font-size: 0.98vw; }
}

main p.index { padding: 15px; font-size: 14px; letter-spacing: 0.06em; position: absolute; bottom: 0; right: 0; z-index: 3; }

@media only screen and (min-width: 1020px) {
	main p.index { padding: 1.2em 1.8em; font-size: 10px; }
}

@media only screen and (min-width: 1020px) {
	main p.index { font-size: 0.98vw; }
}

main .information { padding: 60px 15px; position: relative; }
main .information a { color: #00f; }
main .information a:hover { color: #000; }
main .information p { padding: 0 0 1.5em; font-size: 14px; line-height: 1.5; letter-spacing: 0.06em; }

@media only screen and (min-width: 1020px) {
	main .information { padding: 60px 18px; display: flex; justify-content: space-between; }
	main .information > div { width: 30%; }
	main .information p { font-size: 10px; }
}

@media only screen and (min-width: 1020px) {
	main .information { padding: 5.88vw 1.765vw; }
	main .information p { font-size: 0.98vw; }
}

main .project-index { padding: 60px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 25px 15px; }
main .project-index .item { display: flex; justify-content: center; align-items: center; }
main .project-index .item.portrait { padding: 0 10%; }
main .project-index .item figure { cursor: pointer; }
main .project-index .item figure img { width: 100%; height: auto; transition: opacity 0.4s ease; }
main .project-index .item figure:hover img { opacity: 0.5; }
main .project-index .item figure figcaption { margin: 0.5em 0 0; font-size: 14px; letter-spacing: 0.06em; position: relative; display: block; }
main .project-index .item figure figcaption span + span { position: absolute; top: 0; left: 0; opacity: 0; }
main .project-index .item figure:hover figcaption span { opacity: 0; }
main .project-index .item figure:hover figcaption span + span { opacity: 1; }

@media only screen and (min-width: 1020px) {
	main .project-index { padding: 60px 18px; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 80px 60px; }
	main .project-index .item figure figcaption { font-size: 10px; }
}

@media only screen and (min-width: 1020px) {
	main .project-index { padding: 5.88vw 1.76vw; gap: 7.84vw 5.88vw; }
	main .project-index .item figure figcaption { font-size: 0.98vw; }
}

main footer { margin: auto 0 0; padding: 15px; justify-self: end; }
body.home main footer { display: none; }
main footer p,
main footer ul { font-size: 14px; line-height: 1.5; letter-spacing: 0.06em;  }
main footer ul li { opacity: 0.5; }

@media only screen and (min-width: 1020px) {
	main footer { padding: 18px; }
	main footer p,
	main footer ul { font-size: 10px; }
}

@media only screen and (min-width: 1020px) {
	main footer { padding: 1.76vw; }
	main footer p,
	main footer ul { font-size: 0.98vw; }
}

body > .slides { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(255,255,255,0.75); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 100; }
body > .slides.visible { opacity: 1; pointer-events: auto; }
body > .slides .slide { height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; }
body > .slides .slide button.close { width: 25px; height: 25px; position: absolute; top: 15px; right: 15px; background: none; border: 0; }
body > .slides .slide button.close::before,
body > .slides .slide button.close::after { width: 100%; height: 1px; background: #000; transform: rotate(45deg); position: absolute; top: 50%; left: 0; content: " "; display: block; }
body > .slides .slide button.close::after { transform: rotate(-45deg); }
body > .slides .slide .wrap { width: 100%; padding: 0 15px; }
body > .slides .slide .wrap button { display: none; }
body > .slides .slide .wrap figure img { width: 100%; height: auto; }
body > .slides .slide .wrap figure figcaption { padding: 0.5em 0 0; font-size: 14px; letter-spacing: 0.06em; position: relative; display: block; }

@media only screen and (min-width: 1020px) {
	body > .slides .slide button.close { width: 25px; height: 25px; position: relative; top: auto; right: auto; }
	body > .slides .slide > button.close { display: none; }
	body > .slides .slide .wrap { padding: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; }
	body > .slides .slide .wrap button { display: block; }
	body > .slides .slide .wrap button.prev,
	body > .slides .slide .wrap button.next { width: 32px; height: 62px; background: url(images/arrow.svg) no-repeat 50% 50% / contain; border: 0; align-self: center; justify-self: end; grid-column: 1; grid-row: 1; }
	body > .slides .slide .wrap button.next { transform: rotate(180deg); justify-self: start; grid-column: 3; }
	body > .slides .slide .wrap figure { grid-column: 2; grid-row: 1; display: grid; grid-template-rows: 1fr auto 1fr; gap: 5px; }
	body > .slides .slide .wrap figure button.close { position: relative; top: auto; right: auto; display: block; justify-self: end; }
	body > .slides .slide .wrap figure img { width: auto; height: 70vh; grid-row: 2; }
	body > .slides .slide .wrap figure figcaption { padding: 0; font-size: 10px; grid-row: 3; }
}

@media only screen and (min-width: 1020px) {
	body > .slides .slide button.close { width: 2.45vw; height: 2.45vw; }
	body > .slides .slide .wrap { gap: 1.96vw; }
	body > .slides .slide .wrap button.prev,
	body > .slides .slide .wrap button.next { width: 3.14vw; height: 6.08vw; }
	body > .slides .slide .wrap figure { gap: 0.49vw; }
	body > .slides .slide .wrap figure figcaption { font-size: 0.98vw; }
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}