@charset "UTF-8";
/* ============================================================
   Laura Young — bws.scss
   Single source of truth for the site's look & feel.
   Tweak the variables below and recompile to bws.css.

   NOTE: this rebuild deliberately reproduces the previous
   Concrete5 theme. Values were measured from the live site so
   the design is unchanged — please keep them unless Laura has
   actually asked for something different.
   ============================================================ */
@import url(css/bulma.css);
/* ---------- Palette ---------- */
/* ---------- Type ---------- */
/* ---------- Metrics ---------- */
/* ---------- Navigation ---------- */
/* ---------- Title ---------- */
/* ---------- Gallery ---------- */
/* ============================================================
   Fonts
   ============================================================ */
@font-face {
  font-family: 'ArvilRegular';
  src: url('fonts/arvil_sans-webfont.woff') format('woff'), url('fonts/arvil_sans-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GudeaRegular';
  src: url('fonts/gudea-regular-webfont.woff') format('woff'), url('fonts/gudea-regular-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GudeaBold';
  src: url('fonts/gudea-bold-webfont.woff') format('woff'), url('fonts/gudea-bold-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Global
   ============================================================ */
html, body {
  background: #d7cdc9;
  font-family: "GudeaRegular", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #222222;
}

.site-row {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

a {
  color: #222222;
  text-decoration: underline;
}

a:hover {
  color: #000000;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "ArvilRegular", sans-serif;
  color: #000000;
  font-weight: normal;
}

h1 {
  font-size: 50.4px;
  line-height: 60.48px;
  text-shadow: 1px 1px 0 #e04728;
  margin: 3.2px 0 8px 0;
}

h2 {
  font-size: 30.6px;
  line-height: 36.72px;
  text-shadow: 1px 1px 0 #e04728;
  margin: 3.2px 0 8px 0;
}

h3 {
  font-size: 24px;
  line-height: 28.8px;
  margin: 3.2px 0 8px 0;
}

p {
  font-size: 14px;
  line-height: 25.2px;
  color: #000000;
  margin: 0 0 20px 0;
}

ul, ol {
  list-style: disc;
  margin: 0 0 20px 14px;
  padding: 0;
  font-size: 14px;
  line-height: 16.8px;
}

li {
  color: #000000;
}

hr {
  margin: 30px auto 32px auto;
  border: solid #e04728;
  border-width: 3px 0 0;
  max-width: 95px;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Header
   ============================================================ */
.topper {
  height: 97px;
}

.topper .site-row {
  padding: 0 15px;
}

.site-title {
  font-family: "ArvilRegular", sans-serif;
  font-size: 38px;
  letter-spacing: 6px;
  color: #ffffff;
  text-shadow: 1px 1px 0 #e04728;
  background: #000000;
  font-weight: normal;
  padding: 30px 36px;
  margin: 0 -18px 20px 0;
  float: right;
  /* 16.8px keeps the box 77px tall so it stays inside the 97px .topper.
     If this float ever grows taller than .topper it spills out and the
     flex row below shrinks to avoid it, collapsing the whole layout. */
  line-height: 16.8px;
  position: relative;
  z-index: 100;
}

.site-title a {
  color: #ffffff;
  text-decoration: none;
}

/* ============================================================
   Page layout — sidebar and white panel
   ============================================================ */
.page-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.side {
  width: 20%;
  padding: 0 15px;
  margin-top: -60px;
}

.side p {
  font-size: 14px;
  line-height: 16.8px;
  color: #000000;
  margin: 0 0 20px 0;
}

.right {
  width: 80%;
  padding: 0 15px;
}

.main {
  background: #ffffff;
  /* Only the TOP lift is wanted - that is what rides the panel up over the
     header. A negative bottom margin would pull the footer back up into
     the panel by a fixed 60px while the footer's own 4% top padding grows
     and shrinks with the window, so the headings overlapped the white at
     narrow widths and cleared it at wide ones. */
  margin: -60px 0 0 0;
  padding: 80px 50px 60px 40px;
}

.main p {
  line-height: 25.2px;
}

/* ---------- sidebar navigation ---------- */
.nav-main ul {
  margin: 0 0 20px 0;
  list-style: none;
}

.nav-main li {
  list-style: none;
  font-size: 23px;
  letter-spacing: 2px;
}

.nav-main a {
  display: block;
  font-family: "ArvilRegular", sans-serif;
  font-weight: normal;
  color: #ffffff;
  text-shadow: 1px 1px 0 #e04728;
  background: #000000;
  padding: 6px 8px;
  margin-top: 3px;
  text-decoration: none;
}

.nav-main a:hover,
.nav-main a[aria-current="page"] {
  background: #1d1d1d;
  text-shadow: 1px 1px 0 #000000;
  text-decoration: none;
}

/* ---------- breadcrumb ---------- */
.crumbs {
  font-family: "ArvilRegular", sans-serif;
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 16px;
  line-height: 25.6px;
  color: #222222;
}

.crumbs li {
  display: inline-block;
  list-style: none;
  font-size: 26px;
  line-height: 16.8px;
  color: #000000;
  padding: 0 20px 0 0;
}

.crumbs a {
  color: #000000;
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

/* ============================================================
   Gallery
   ============================================================ */
.group-heading {
  font-size: 14px;
  line-height: 25.2px;
  color: #000000;
  margin: 0 0 20px 0;
}

.group-heading strong {
  font-family: 'GudeaBold', sans-serif;
  font-weight: bold;
}

.sg {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

.sg-item {
  display: block;
  position: relative;
  width: calc(50% - 10px);
  margin: 5px 5px 50px 5px;
  padding: 0;
  text-decoration: none;
  color: #000000;
  font-size: 14px;
  line-height: 21px;
}

.sg-item-image {
  display: block;
  overflow: hidden;
  line-height: 0;
}

.sg-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .25s;
}

.sg-item:hover img {
  opacity: .82;
}

.image-caption {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  color: #000000;
  text-align: center;
  text-decoration: none;
}

/* ---------- artwork index ---------- */
.medium-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}

.medium-list .sg-item {
  text-align: center;
}

/* ============================================================
   Lightbox
   ============================================================ */
#lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Open/close animation reproduces Magnific Popup's mfp-zoom-in, which is
   what the Concrete5 site used: the figure scales 0.8 -> 1 over .2s while
   the backdrop fades over .3s. Driven by .is-opening / .is-closing, which
   js/lightbox.js toggles around the native dialog open and close. The
   settled state is the default, so if the script ever fails the lightbox
   is simply visible rather than stuck invisible. */
#lightbox::backdrop {
  background: rgba(0, 0, 0, .85);
  transition: background .3s ease-out;
}

#lightbox.is-opening::backdrop,
#lightbox.is-closing::backdrop {
  background: rgba(0, 0, 0, 0);
}

#lightbox figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  box-sizing: border-box;
  opacity: 1;
  transform: scale(1);
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}

#lightbox.is-opening figure,
#lightbox.is-closing figure {
  opacity: 0;
  transform: scale(.8);
}

#lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 130px);
  width: auto;
  height: auto;
  opacity: 0;
  transition: opacity .2s;
  background: #ffffff;
}

#lightbox img.is-ready {
  opacity: 1;
}

#lightbox figcaption {
  color: #ffffff;
  font-family: "GudeaRegular", sans-serif;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  margin-top: 14px;
  min-height: 21px;
}

#lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: #ffffff;
  font-family: "ArvilRegular", sans-serif;
  cursor: pointer;
  line-height: 1;
  padding: 10px 16px;
  opacity: .75;
  transition: opacity .2s ease-in-out;
  /* The figure is transformed, which makes it a stacking context that
     would otherwise paint over these buttons (they come earlier in the
     DOM) and swallow their clicks. */
  z-index: 2;
}

#lightbox.is-opening button,
#lightbox.is-closing button {
  opacity: 0;
}

#lightbox button:hover {
  opacity: 1;
  text-shadow: 1px 1px 0 #e04728;
}

.lb-close {
  top: 10px;
  right: 14px;
  font-size: 34px;
}

.lb-prev {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 54px;
}

.lb-next {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 54px;
}

/* ============================================================
   Small screens
   ============================================================ */
@media only screen and (max-width: 768px) {
  .topper {
    height: auto;
  }
  .site-title {
    float: none;
    display: block;
    margin: 0;
    font-size: 28px;
    letter-spacing: 4px;
    padding: 22px 20px;
    text-align: center;
  }
  .side,
  .right {
    width: 100%;
    margin-top: 0;
  }
  .side {
    padding-top: 20px;
  }
  .main {
    margin: 20px 0 0 0;
    padding: 30px 20px;
  }
  .nav-main ul {
    margin-bottom: 24px;
  }
  #lightbox figure {
    padding: 50px 10px 20px 10px;
  }
  .lb-prev, .lb-next {
    font-size: 40px;
  }
}

@media only screen and (max-width: 480px) {
  .sg-item {
    width: calc(100% - 10px);
  }
}

/* ============================================================
   Home slideshow
   ============================================================ */

.slideshow {
  position: relative;
  max-width: 624px;
  margin: 0 auto;
  aspect-ratio: 624 / 648;
}

.slideshow .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  animation: slidefade 18s infinite;
}

.slideshow .slide:nth-child(2) { animation-delay: 6s; }
.slideshow .slide:nth-child(3) { animation-delay: 12s; }

@keyframes slidefade {
  0%     { opacity: 0; }
  4%     { opacity: 1; }
  33%    { opacity: 1; }
  37%    { opacity: 0; }
  100%   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow .slide { animation: none; opacity: 0; }
  .slideshow .slide:first-child { opacity: 1; }
}

/* ============================================================
   Biography
   ============================================================ */

.bio-top { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 20px; }
.bio-copy { flex: 1 1 340px; min-width: 0; }
.bio-portrait { flex: 0 1 240px; }
.bio-portrait img { display: block; width: 100%; height: auto; }

@media only screen and (max-width: 768px) {
  .bio-portrait { flex: 1 1 100%; max-width: 300px; }
}

/* ============================================================
   Sidebar portrait (home only)
   ============================================================ */

.side-portrait { margin-bottom: 20px; }

.border img { border: 1px solid #000; display: block; width: 100%; height: auto; }

/* ============================================================
   Footer — galleries and links
   ============================================================ */

footer { clear: both; }

.site-footer {
  /* background is reset because Bulma ships its own .footer rule
     with a #fafafa background that would otherwise show through. */
  background: transparent;
  padding: 4% 3% 1% 3%;
}

.footer-cols { display: flex; flex-wrap: wrap; }

.footer-col { width: 25%; padding: 0 15px; }

.site-footer h2 {
  font-family: "ArvilRegular", sans-serif;
  font-size: 44px;
  line-height: 52.8px;
  letter-spacing: 4px;
  font-weight: normal;
  text-align: right;
  text-shadow: 1px 1px 0 #e04728;
  margin: 3.2px 0 8px 0;
  color: #000000;
}

.site-footer p { margin: 0 0 20px 0; }

.site-footer ul { list-style: disc; margin: 0 0 20px 18px; }

@media only screen and (max-width: 768px) {
  .footer-col { width: 100%; padding-bottom: 0; }
  .site-footer h2 { text-align: left; font-size: 34px; margin-top: 10px; }
  .site-footer { padding: 24px 20px 8px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #lightbox figure,
  #lightbox button,
  #lightbox::backdrop { transition: none; }
  #lightbox figure { transform: none; }
}