/* ============================================
   CANVAS STUDIOS — Portfolio Stylesheet
   Left-sidebar layout, warm cream palette
   (modeled on brittanybravo.com)
   ============================================ */

:root {
  --cream: #f8f5ef;
  --ink: #211f1c;
  --rust: #c05b3c;
  --grey: #6f6a63;
  --sidebar-w: 320px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  padding: 52px 44px 36px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.brand {
  display: block;
}

.brand h1 {
  font-family: "Anton", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.brand .byline {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

.site-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: 60px;
}

.site-nav a {
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: var(--rust);
}

.site-nav a.active {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 48px;
}

.sidebar-footer .socials {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

/* Icon plus handle, so it's obvious this is the Instagram account
   rather than a bare symbol. */
.sidebar-footer .socials a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 1;
}

.sidebar-footer .socials svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: var(--ink);
  transition: fill 0.2s ease;
}

/* On desktop the email is written out in full below, so the icon is
   only needed on phones (see the mobile rules at the end of this file).
   Matches the specificity of the .socials rule above so it actually wins. */
.sidebar-footer .socials a.mail-link {
  display: none;
}

.sidebar-footer .socials a:hover,
.sidebar-footer .socials a:hover svg {
  color: var(--rust);
  fill: var(--rust);
}

.contact-mini {
  font-size: 13px;
  line-height: 1.75;
}

.contact-mini .label {
  color: var(--ink);
}

.contact-mini a:hover {
  color: var(--rust);
}

.copyright {
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a9a49b;
}

/* ---------- Content area ---------- */

.content {
  margin-left: var(--sidebar-w);
  padding: 52px 48px 72px 16px;
}

/* ---------- Photo grid (masonry via CSS columns) ---------- */

.gallery {
  column-count: 3;
  column-gap: 14px;
}

.gallery .tile {
  position: relative;
  break-inside: avoid;
  margin-bottom: 14px;
  cursor: pointer;
  overflow: hidden;
}

.gallery .tile .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.gallery .tile:hover .cap {
  opacity: 1;
}

.gallery .tile img {
  width: 100%;
  transition: opacity 0.3s ease;
}

.gallery .tile:hover img {
  opacity: 0.88;
}

@media (max-width: 1200px) {
  .gallery { column-count: 2; }
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.lightbox.open {
  display: flex;
}

.lightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 92vw;
}

.lightbox img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
}

.lightbox figcaption {
  color: #e8e4dd;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  max-width: 640px;
  padding: 0 16px;
}

.lightbox figcaption:empty {
  display: none;
}

.lightbox .close,
.lightbox .prev,
.lightbox .next {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  padding: 16px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  font-family: inherit;
}

.lightbox .close:hover,
.lightbox .prev:hover,
.lightbox .next:hover {
  opacity: 1;
}

.lightbox .close { top: 12px; right: 18px; }
.lightbox .prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 10px; top: 50%; transform: translateY(-50%); }

/* ---------- Video page ---------- */

.video-list {
  max-width: 1000px;
}

.video-item {
  margin-bottom: 60px;
}

.video-item .frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
}

.video-item .frame iframe,
.video-item .frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-item h2 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 16px;
}

.video-item p {
  font-size: 14px;
  color: var(--grey);
  margin-top: 6px;
  line-height: 1.7;
}

/* ---------- About + Contact page ---------- */

.about {
  max-width: 1200px;
}

.about-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.about-heading {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.28;
  margin-bottom: 30px;
}

#bio p {
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 22px;
}

.portrait {
  width: 100%;
  margin-top: 10px;
}

.inquiries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 48px;
  margin-top: 80px;
}

.inquiries h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  margin-bottom: 18px;
}

/* Matches the typeface of the enquiry form below it, so the heading and
   the form read as one block rather than two different designs. */
.enquiry h3 {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

/* Enquiry form. Kept to roughly the width of the bio text so it reads as
   part of the page rather than taking the whole thing over. */
.enquiry {
  max-width: 620px;
}

.enquiry iframe {
  display: block;
  width: 100%;
  border: 0;
}

.inquiries p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
}

.inquiries a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.inquiries a:hover {
  color: var(--rust);
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  /* Phone header: name on the left, Instagram and email tucked into the
     top-right corner, menu underneath. Keeps the header short so photos
     start near the top of the screen instead of below a wall of text. */
  .sidebar {
    position: static;
    width: auto;
    padding: 32px 24px 4px;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand  links"
      "nav    nav";
    align-items: start;
    column-gap: 16px;
  }

  .brand {
    grid-area: brand;
  }

  .brand h1 {
    font-size: 34px;
  }

  .site-nav {
    grid-area: nav;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 26px;
  }

  .sidebar-footer {
    grid-area: links;
    margin-top: 4px;
    padding-top: 0;
  }

  .sidebar-footer .socials {
    justify-content: flex-end;
    gap: 0;
    margin-bottom: 0;
    margin-right: -11px;
  }

  /* Padding rather than a bigger icon: gives thumbs a target close to
     Apple's 44px guidance while the icon itself stays small. */
  .sidebar-footer .socials a {
    padding: 11px;
  }

  .sidebar-footer .socials svg {
    width: 23px;
    height: 23px;
  }

  .site-nav a {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* The handle and full address are too long for the corner — the two
     icons say it, and tapping the envelope opens the mail app. */
  .sidebar-footer .js-ig-handle,
  .contact-mini {
    display: none;
  }

  .sidebar-footer .socials a.mail-link {
    display: inline-flex;
  }

  .copyright {
    display: none;
  }

  .content {
    margin-left: 0;
    padding: 32px 28px 56px;
  }

  .about-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-heading {
    font-size: 30px;
  }

  .inquiries {
    margin-top: 48px;
  }
}

@media (max-width: 540px) {
  .gallery { column-count: 1; }
}