/* One shared look for every page, after lukasrosenstudio.com:
   the name top left, the menu underneath, plenty of white space.
   Two typefaces (the handwriting only for the name, Montserrat 400 for
   everything else, 600 only for the dates on the vita), three text sizes,
   no capitals, no boxes or shadows.
   This file is linked last in every <head>, so it wins over the inline styles. */

@font-face {
  font-family: "MyHandwriting";
  src: url("../Myfont-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --ink: #222;
  --muted: #6b6b66;
  --line: #e2dfd8;
  --t-s: 0.8rem;      /* captions, labels, footer */
  --t-m: 1rem;        /* text, menu, lists */
  --t-l: 1.375rem;    /* at most one title per section */
  --pad: 2.4rem;      /* white margin around everything */
  --side: 15rem;      /* left column for name and menu */
  --top: 9.5rem;      /* content starts beside the menu */
  --measure: 54rem;   /* widest content column */
}

html,
body {
  overflow-x: clip !important;
  background: #fff !important;
}

body {
  margin: 0 !important;
  color: var(--ink);
}

body,
body *:not(.sh-name) {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

a {
  color: inherit;
}

.visually-hidden,
.page-heading-row,
.heading-row {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Name and menu ---------- */
.sh {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 20;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 2.2rem 0 0 var(--pad) !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.sh-name {
  display: inline-block;
  color: #000;
  font-family: "MyHandwriting", cursive !important;
  font-size: 2.3rem !important;
  line-height: 1;
  letter-spacing: 1px;
  word-spacing: 0.25em;
  white-space: nowrap;
  text-decoration: none;
}

.sh-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.35rem !important;
  margin: 2.8rem 0 0 !important;
  padding: 0 !important;
}

.sh-nav .sh-link {
  color: var(--ink);
  font-size: var(--t-m) !important;
  line-height: 1.35;
  text-transform: lowercase !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.sh-nav .sh-link:hover,
.sh-nav .sh-link[aria-current="page"] {
  border-color: var(--ink);
}

/* every page: content to the right of the menu, generous margins */
@media (min-width: 761px) {
  body {
    box-sizing: border-box;
    padding: var(--top) var(--pad) 0 var(--side) !important;
  }
}

@media (max-width: 760px) {
  body {
    box-sizing: border-box;
    padding: 0 1.25rem !important;
  }

  .sh {
    position: static !important;
    padding: 1.6rem 0 0 !important;
  }

  .sh-name {
    font-size: clamp(0.95rem, 4.8vw, 1.6rem) !important;
  }

  .sh-nav {
    margin: 1.4rem 0 2.6rem !important;
  }
}

/* ---------- Shared text styles ---------- */
h1,
h2 {
  font-size: var(--t-l) !important;
  line-height: 1.3 !important;
  margin: 0 0 0.6rem !important;
  color: var(--ink) !important;
}

figcaption {
  font-size: var(--t-s) !important;
  line-height: 1.5;
  color: var(--muted) !important;
}

figcaption em {
  color: var(--ink);
}

.page-footer,
.site-footer,
footer,
.footer {
  font-size: var(--t-s) !important;
  color: var(--muted) !important;
  text-align: left !important;
  background: none !important;
}

.page-footer a,
.site-footer a,
footer a,
.footer a,
.footer-link {
  font-size: var(--t-s) !important;
  color: var(--muted) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Home: one image, after lukasrosenstudio.com ---------- */
/* the image as tall as the window (minus one line for the links below it),
   centred in the window, the name running over its top edge as on
   lukasrosenstudio.com; never wider than leaves the menu free (100vw - 18rem) */
.home {
  width: min(46rem, calc((100dvh - 4.5rem) * 0.6667), calc(100vw - 18rem));
  margin: 0 auto;
  padding-bottom: 2rem;
}

.home-figure {
  margin: 0;
}

.home-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.home-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 0.8rem;
  font-size: var(--t-s);
  color: var(--muted);
}

.home-line a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-line .home-diploma {
  color: var(--ink);
}

.home-links {
  display: flex;
  gap: 1.2rem;
}

@media (min-width: 761px) {
  body.page-home {
    padding: 0 !important;
  }
}

@media (max-width: 760px) {
  .home {
    width: auto;
    margin-left: 0;
  }

  .home-figure {
    margin: 0 -1.25rem;
  }
}

/* ---------- Diploma page ---------- */
.diploma {
  max-width: var(--measure);
  padding-bottom: 3rem;
}

.work-subtitle,
.prize {
  font-size: var(--t-m) !important;
  color: var(--muted) !important;
  margin: 0.15rem 0 0 !important;
}

.works-row {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: flex-start;
}

.works-row:first-of-type {
  margin-top: 2.8rem;
}

/* --ar on each figure is the image's aspect ratio, so both images in a row share one height */
.works-row figure {
  flex: var(--ar) 1 0;
  min-width: 0;
  margin: 0;
}

.works-row button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #ece8df;
  cursor: zoom-in;
  overflow: hidden;
}

.works-row img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s ease;
}

.works-row button:hover img {
  transform: scale(1.02);
}

.works-row button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

figcaption {
  margin-top: 0.6rem;
}

.work-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
  margin-top: 3.5rem;
}

.work-text p {
  margin: 0 0 1.1rem;
  font-size: var(--t-m);
  line-height: 1.75;
  max-width: 38rem;
}

.facts {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-m);
  line-height: 1.55;
}

.facts li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}

.facts li:last-child {
  border-bottom: 1px solid var(--line);
}

.facts strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--t-s) !important;
  color: var(--muted);
}

.facts a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.diploma .site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: 4rem;
}

dialog.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.97);
}

dialog.lightbox::backdrop {
  background: rgba(255, 255, 255, 0.97);
}

.lightbox-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 3.5rem 1rem 1.5rem;
  box-sizing: border-box;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(100dvh - 8rem);
  object-fit: contain;
}

.lightbox p {
  margin: 0;
  font-size: var(--t-s);
  color: var(--muted);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: transparent;
  font-size: var(--t-s) !important;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 900px) {
  .work-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 700px) {
  .works-row {
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 1.6rem;
  }

  .works-row figure {
    flex: none;
    width: 100%;
  }
}

/* ---------- Vita: after the info page on krowni.com ---------- */
/* two columns: contact, about and awards on the left, exhibitions and
   education on the right; dates right-aligned in their own column */
.cv {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 3rem clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  max-width: 62rem;
  padding-bottom: 3rem;
}

.cv-block + .cv-block {
  margin-top: 3rem;
}

.cv h2 {
  margin: 0 0 0.9rem !important;
}

.cv-block p {
  margin: 0 0 1rem;
  font-size: var(--t-m);
  line-height: 1.7;
}

.cv-contact p {
  margin: 0;
}

.cv-block a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cv-portrait {
  margin: 1.6rem 0 0;
}

.cv-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.cv-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-list li {
  display: grid;
  grid-template-columns: 4.9rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.4rem 0;
  font-size: var(--t-m);
  line-height: 1.5;
}

/* the one place with a second weight: the dates, as on krowni.com */
.cv .cv-year {
  font-weight: 600 !important;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cv > .site-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
}

@media (max-width: 900px) {
  .cv {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

/* ---------- Gallery ---------- */
main.max-w-4xl {
  max-width: var(--measure) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 0 !important;
}

#prevBtn,
#nextBtn {
  background: none !important;
  opacity: 1 !important;
}

#prevBtn svg,
#nextBtn svg,
#prevBtn path,
#nextBtn path {
  color: var(--ink) !important;
  stroke: var(--ink) !important;
}

.gallery-view-switch,
.gallery-view-switch * {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--muted) !important;
  font-size: var(--t-s) !important;
}

.gallery-view-button.is-active {
  color: var(--ink) !important;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.gallery-slider-caption,
.gallery-slider-caption *,
.gallery-flow-caption,
.gallery-flow-caption * {
  font-size: var(--t-s) !important;
  color: var(--muted) !important;
}

.gallery-top-link,
main.max-w-4xl a {
  font-size: var(--t-s) !important;
}

/* ---------- Contact ---------- */
main.page {
  width: auto !important;
  max-width: var(--measure) !important;
  margin: 0 !important;
  padding: 0 0 3rem !important;
}

.commission-panel,
.commission-static-inner,
.commission-panel-body,
.commission-note {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.commission-static-inner,
.commission-panel-body {
  padding: 0 !important;
}

.commission-copy p,
.commission-note {
  font-size: var(--t-m) !important;
  line-height: 1.7 !important;
  padding: 0 !important;
}

.commission-copy p {
  color: var(--ink) !important;
}

.commission-note {
  color: var(--muted) !important;
}

.commission-form label,
.commission-form .optional,
.commission-help {
  font-size: var(--t-s) !important;
  color: var(--muted) !important;
}

.commission-form input,
.commission-form select,
.commission-form textarea {
  font-size: var(--t-m) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #bdb8ad !important;
  border-radius: 0 !important;
}

.commission-form .button {
  font-size: var(--t-m) !important;
  color: var(--ink) !important;
  background: none !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
}

/* ---------- Publications ---------- */
.pubs-page main {
  width: auto !important;
  max-width: var(--measure) !important;
  margin: 0 !important;
  padding: 0 0 3rem !important;
}

.pubs li {
  border-color: var(--line) !important;
}

.pub-type,
.pub-meta,
.pub-meta a {
  font-size: var(--t-s) !important;
  color: var(--muted) !important;
}

.pub-title {
  font-size: var(--t-m) !important;
}

/* ---------- Imprint ---------- */
.panel {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.panel h2 {
  font-size: var(--t-s) !important;
  color: var(--muted) !important;
  margin: 1.8rem 0 0.3rem !important;
}

.panel h2:first-of-type {
  margin-top: 0 !important;
}

.panel p {
  font-size: var(--t-m) !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
}

/* ---------- 404 ---------- */
.not-found {
  display: block !important;
  min-height: 0 !important;
  text-align: left !important;
  color: var(--ink) !important;
}

.not-found h1,
.not-found p {
  max-width: 36rem;
  margin: 0 0 1rem !important;
  color: var(--ink) !important;
  text-align: left !important;
}

.not-found .home-link {
  background: none !important;
  color: var(--ink) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}