/*
      MINIMAL ARTIST PORTFOLIO
      Shared styles for index.html and info.html.
      To add your own artwork photos, create an "images" folder next to
      index.html and save JPG/PNG/WebP files with the names used below.
    */
    :root {
      --ink: #161616;
      --paper: #ffffff;
      --muted: #777672;
      --sidebar: 265px;
      --page-gutter: clamp(24px, 4.2vw, 76px);
      --font: Arial, Helvetica, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 13px; line-height: 1.43; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; text-decoration: none; }
    a:hover, button:hover { opacity: .58; }
    a:focus-visible, button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
    button { color: inherit; font: inherit; }

    .sidebar { position: fixed; top: 34px; left: var(--page-gutter); width: calc(var(--sidebar) - 35px); bottom: 22px; display: flex; flex-direction: column; z-index: 3; }
    .wordmark { font-size: 25px; font-weight: 400; line-height: 1.09; letter-spacing: -.055em; width: max-content; margin-bottom: 53px; }

    .sidebar-nav { overflow: auto; max-height: 100%; scrollbar-width: thin; }
    .nav-label { display: block; margin: 0 0 13px 0; font-weight: 400; letter-spacing: .005em; }
    .nav-work { display: flex; flex-direction: column; gap: 3px; padding-left: 18px; margin: 0 0 34px 0; }
    .nav-work a { display: block; max-width: 204px; }
    .nav-secondary { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
    .sidebar-bottom { margin-top: auto; padding-top: 25px; color: var(--muted); font-size: 11px; }

    main { margin-left: calc(var(--sidebar) + var(--page-gutter)); margin-right: var(--page-gutter); max-width: 1460px; padding-top: 42px; }
    .news { min-height: 352px; width: min(100%, 595px); font-size: 13px; }
    .news h1, .section-heading, .about h2, .contact h2 { font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0; margin: 0 0 19px; }
    .news h1 { font-style: italic; }
    .news p { margin: 0 0 13px; }
    .news .news-title { text-decoration: underline; text-underline-offset: 2px; }
    .news .small-gap { margin-top: 27px; }
    .section-heading { margin-bottom: 35px; }

    /* Irregular, spacious gallery, inspired by minimal Cargo-style portfolios. */
    .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: clamp(34px, 6.3vw, 115px); row-gap: 70px; }
    .work { display: block; width: 100%; padding: 0; text-align: left; border: 0; background: transparent; cursor: pointer; }
    .work:nth-child(2n) { margin-top: clamp(35px, 7vw, 120px); }
    .image-frame { position: relative; display: block; width: 100%; overflow: hidden; background: #eae6e1; }
    .portrait { aspect-ratio: 3 / 4; }
    .landscape { aspect-ratio: 5 / 3.6; }
    .square { aspect-ratio: 1 / 1; }
    .tall { aspect-ratio: 3 / 4.65; }
    .image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Houd de afbeelding in de laadstroom, ook in Safari.
       display:none in combinatie met loading=lazy voorkwam dat foto's geladen werden. */
    .image-frame.is-placeholder img { opacity: 0; }
    .placeholder { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; overflow: hidden; }
    .image-frame.is-placeholder .placeholder { display: flex; }
    .placeholder::before { content: ""; position: absolute; width: 50%; height: 57%; border-radius: 46% 42% 35% 36% / 34% 50% 39% 41%; transform: rotate(-19deg); background: linear-gradient(130deg, #ffffff70 0%, #a89c8d 50%, #797168 90%); box-shadow: 18px 26px 25px #3c363229, inset -10px -4px 19px #ffffff70; }
    .placeholder::after { content: ""; position: absolute; width: 24%; height: 34%; transform: translate(55%, 15%) rotate(21deg); border-radius: 60% 25% 52% 29%; background: linear-gradient(50deg,#93857d,#ddd5ce); box-shadow: 8px 9px 11px #37302c29; }
    .placeholder span { position: absolute; left: 14px; bottom: 12px; right: 14px; z-index: 1; color: #4a4540; font-size: 10px; letter-spacing: .01em; text-align: left; }
    .tone-1 .placeholder { background: #d8d2cb; }
    .tone-2 .placeholder { background: #b4b0ab; }
    .tone-2 .placeholder::before { transform: rotate(55deg); border-radius: 18% 48% 30% 27%; background: linear-gradient(110deg, #b1a59d, #574c49 80%); }
    .tone-3 .placeholder { background: #eee9e4; }
    .tone-3 .placeholder::before { transform: rotate(10deg); width: 68%; height: 37%; border-radius: 28% 51% 34% 48%; }
    .tone-4 .placeholder { background: #cecbc5; }
    .tone-4 .placeholder::before { transform: rotate(48deg); width: 35%; height: 71%; border-radius: 30% 25% 34% 37%; background: linear-gradient(140deg, #d7d1cb, #83817c); }
    .tone-5 .placeholder { background: #c9c9c8; }
    .tone-5 .placeholder::before { transform: rotate(-27deg); width: 32%; height: 79%; border-radius: 48% 31% 18% 52%; background: linear-gradient(130deg, #6c6d6e,#e2e1de); }
    .tone-6 .placeholder { background: #e5e0da; }
    .tone-6 .placeholder::before { transform: rotate(24deg); width: 63%; height: 45%; }
    .tone-7 .placeholder { background: #bdb5aa; }
    .tone-7 .placeholder::before { transform: rotate(-46deg); width: 45%; height: 67%; }
    .tone-8 .placeholder { background: #dbd7d1; }
    .tone-8 .placeholder::before { transform: rotate(69deg); width: 62%; height: 41%; }
    .work-title { margin-top: 9px; display: block; font-size: 12px; }
    .work-meta { color: var(--muted); display: block; font-size: 11px; margin-top: 2px; }

    .about, .contact { border-top: 1px solid #dedede; margin-top: clamp(135px, 18vw, 260px); padding-top: 18px; padding-bottom: 5px; scroll-margin-top: 25px; }
    .about-body { max-width: 580px; line-height: 1.6; }
    .about-body p { margin-top: 0; }
    .contact { margin-top: 115px; margin-bottom: 120px; }
    .editable-note { color: var(--muted); font-size: 12px; }
    #work { scroll-margin-top: 32px; }
    .work[id] { scroll-margin-top: 36px; }

    /* Image detail overlay */
    dialog { border: none; padding: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; background: #fff; color: var(--ink); }
    dialog::backdrop { background: #fff; }
    .viewer { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: clamp(25px, 5vw, 85px); padding: 65px var(--page-gutter) 36px; }
    .viewer-media { height: calc(100dvh - 120px); display: flex; align-items: center; justify-content: center; min-height: 240px; overflow: hidden; }
    .viewer-media img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
    .viewer-media .viewer-empty { background: #eee9e4; width: min(100%, 640px); aspect-ratio: 4/3; display: none; align-items: center; justify-content: center; padding: 25px; font-size: 13px; color: #777; }
    .viewer-media.no-image img { display: none; }
    .viewer-media.no-image .viewer-empty { display: flex; }
    .viewer-info { align-self: start; padding-top: 8px; font-size: 13px; }
    .viewer-info h3 { font-size: 16px; line-height: 1.25; font-weight: 400; margin: 0 0 11px; }
    .viewer-info p { margin: 0 0 13px; }
    .viewer-close { position: absolute; top: 24px; right: var(--page-gutter); background: transparent; border: none; padding: 0; font-size: 13px; cursor: pointer; }
    .viewer-controls { display: flex; gap: 23px; margin-top: 55px; }
    .viewer-controls button { border: 0; background: transparent; padding: 0; cursor: pointer; }

    @media (min-width: 1650px) { main { margin-left: 350px; } }
    @media (max-width: 1000px) {
      :root { --sidebar: 222px; }
      .wordmark { font-size: 23px; }
      .gallery { column-gap: 28px; }
      .news { min-height: 300px; }
    }
    @media (max-width: 760px) {
      .sidebar { position: static; width: auto; margin: 0 22px; padding-top: 25px; display: block; }
      .wordmark { margin-bottom: 28px; font-size: 24px; }
      .sidebar-nav { overflow: visible; }
      .nav-work { display: none; }
      .nav-label { display: inline-block; margin: 0 18px 0 0; }
      .nav-secondary { display: inline-flex; flex-direction: row; gap: 18px; }
      .sidebar-bottom { display: none; }
      main { margin: 0 22px; padding-top: 68px; }
      .news { min-height: 295px; }
      .gallery { column-gap: 22px; row-gap: 45px; }
      .work:nth-child(even) { margin-top: 48px; }
      .viewer { grid-template-columns: 1fr; gap: 15px; padding: 65px 22px 35px; }
      .viewer-media { height: 55dvh; min-height: 200px; }
      .viewer-info { padding-top: 0; }
      .viewer-close { right: 22px; }
      .viewer-controls { margin-top: 18px; }
    }
    @media (max-width: 480px) {
      body { font-size: 13px; }
      main { padding-top: 56px; }
      .news { min-height: 335px; }
      .gallery { grid-template-columns: 1fr; row-gap: 43px; }
      .work:nth-child(even) { margin-top: 0; }
      .image-frame { max-width: 100%; }
      .about { margin-top: 120px; }
      .contact { margin-top: 90px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Info / CV page: shares the same left navigation as the portfolio. */
.info-main { padding-top: 40px; padding-bottom: 130px; max-width: 1040px; }
.info-main h1 { margin: 0 0 45px; font-weight: 400; font-size: 14px; }
.info-intro { max-width: 640px; line-height: 1.6; margin-bottom: 80px; }
.info-intro p { margin: 0 0 12px; }
.info-main section { margin: 0 0 66px; }
.info-main h2 { font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0 0 25px; }
.cv-year-group { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 13px; margin: 0 0 27px; }
.cv-year { color: var(--muted); }
.cv-items { list-style: none; margin: 0; padding: 0; }
.cv-items li { margin: 0 0 8px; max-width: 740px; }
.cv-items li:last-child { margin-bottom: 0; }
.cv-plain li { margin: 0 0 11px; max-width: 760px; }
.info-main a.link { text-decoration: underline; text-underline-offset: 2px; }
.cv-note { color: var(--muted); }
@media (max-width: 760px) {
  .info-main { padding-top: 58px; }
  .info-intro { margin-bottom: 50px; }
  .info-main section { margin-bottom: 53px; }
}
@media (max-width: 480px) {
  .info-main h1 { margin-bottom: 30px; }
  .cv-year-group { grid-template-columns: 1fr; gap: 6px; margin-bottom: 29px; }
  .cv-year { color: var(--muted); }
}