:root
  { --sans: "Plus Jakarta Sans", "OTJubilee Silver", sans-serif;
    --serif: "OTJubilee Ruby", serif;
    --page-width:  880px;
    --gallery-row: 272px;
    --page:       oklch(96% .019 76);
    --well:       oklch(93% .021 76);
    --line:       oklch(88% .02  76);
    --text:       oklch(21% .05  76);
    --accent:     oklch(33% .18  76);
    --shadow:     oklch(22% .04  76 / .44);
    --available:  oklch(28% .16  76 / .66);
    --commission: oklch(96% .008 76 / .66); }

html
  { font: 18px var(--sans); font-weight: 300 }
body
  { background: var(--page); color: var(--text); margin: 0 }
a
  { color: var(--text); text-decoration: none }
p
  { margin: 18px 0 }
h1, h2, h3, h4
  { font-family: var(--serif); color: var(--accent); font-weight: lighter }
h1
  { font-size: 76px; margin: 36px 0 }
h1 small
  { font-size: 30px; display: block }

body, main
  { min-height: 100vh }
main
  { display: flex; flex-direction: column }
main > article
  { flex-grow: 1 }

section h1
  { margin-top: 0 }

.spacer
  { flex-grow: 1 }

.brand
  { color: var(--accent) }
.smolcaps
  { font-variant-caps: all-small-caps; }
.nowrap
  { white-space: nowrap; }

.text-body
  { max-width: 50ch; line-height: 150% }

img
  { width: 100% }

.narrow-stack
  { display: flex; grid-gap: 36px }
.narrow-stack > *
  { flex: 1 1 100% }

@media (max-width: 777px)
  { .narrow-stack
      { flex-direction: column } }

header nav,
footer p,
article
  { max-width: var(--page-width); margin: auto }

header
  { position: sticky; top: 0; z-index: 9; }

header
  { font-size: 24px;
    font-family: var(--serif);
    background: var(--well);
    padding: 0 24px;
    border-bottom: 1px solid var(--line) }

header .main-nav
  { display: flex; gap: 36px; align-items: baseline; justify-content: end }
header .main-nav > :first-child
  { justify-self: start }

header .main-nav a
  { padding: 9px 0 }

header .main-nav a
  { border: 0 solid transparent;
    border-width: 6px 0 }
header .main-nav a.active,
header .main-nav a:hover
  { border-top-color: var(--accent) }

footer
  { font-family: var(--serif);
    border-top: 1px solid var(--line);
    background: var(--well);
    padding: 24px }

footer p
  { text-align: right }

/* ... */

.about h1, .contact h1
  { align-self: center }

article.gallery
  { padding: 12px 12px }
article.gallery-item,
article.about,
article.contact
  { padding: 36px }

/* about */

.about-images
  { display: flex; flex-direction: column; gap: 36px }

.about-images
  { flex-basis: 70% }


/* gallery */

ol.gallery-list
  { list-style: none;
    padding:    0;
    margin:     0;
    display:   flex;
    flex-wrap: wrap;
    gap:       12px; }

ol.gallery-list::after
  { content: ""; flex-grow: 9; }

ol.gallery-list li
  { height: var(--gallery-row);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative }

ol.gallery-list li a
  { display: flex; height: 100%; width: 100% }

ol.gallery-list li a:hover img
  { box-shadow: 0 6px 36px -6px var(--shadow) }
ol.g-listallery li a:hover img
  { border: 1px solid var(--page) }
ol.gallery-list li a       img
  { border: 1px solid transparent }

ol.gallery-list li img
  { width: 100%;
    height: 100%;
    border-radius: 3px;
    aspect-ratio: var(--ar);
    object-fit: cover }

ol.gallery-list li .available
  { position: absolute; right: 0;
    backdrop-filter: blur(3px);
    font: 16px var(--serif);
    font-variant: small-caps;
    border-radius: 12px; margin: 12px; padding: 1px 9px; }

ol.gallery-list li .available
  { color: var(--text); background: var(--commission) }

ol.gallery-list li[data-available="available"] .available
  { color: var(--page); background: var(--available) }

/* gallery item */

.gallery-item h1
  { font-size: 54px }

.gallery-item .item-image
  { flex-basis: 150%;
    line-height: 0 }

ul.item-details
  { list-style: none; margin: 0; padding: 0 }
ul.item-details li
  { display: flex; gap: 36px; justify-content: space-between }
ul.item-details li
  { line-height: 2 }
ul.item-details li .extra
  { font-size: 15px; font-variant: small-caps }
ul.item-details li .value
  { text-align: right }

ul.item-details li
{ border-top:    1px solid var(--line) }
ul.item-details li:last-child
{ border-bottom: 1px solid var(--line) }

/* contact */

button, input, textarea
  { font: inherit }

form label,
form input,
form textarea
  { display: block; width: 100%; box-sizing: border-box }

form label,
form button
  { font-variant: small-caps; margin-top: 9px }
form button[type='submit']
  { margin-top: 18px }

form button,
form input,
form textarea
  { appearance: none;
    background: transparent;
    padding: 3px 9px;
    border: 1px solid var(--shadow);
    border-radius: 3px }
form textarea
  { resize: vertical }

form button
  { background: var(--accent);
    border-color: var(--accent);
    color: var(--page);
    font-weight: normal }

button:enabled
  { cursor: pointer }