/* Layout concept: a spring-in-Texas portfolio. Paper ground, indigo ink, periwinkle and sage
   bands with hand-drawn wavy edges (from Brianna's Canva frames); photographs laid out in
   rows like magazine spreads. One deliberate look, light only, so every color is set here. */
:root {
  --paper: #faf3f0;          /* Brianna's page color */
  --paper-deep: #f2e7e2;     /* mats behind artwork */
  --ink: #363f81;            /* her indigo text */
  --ink-soft: #565c94;
  --periwinkle: #bcd7fe;     /* her name band */
  --periwinkle-soft: #dbe8fd;
  --sage: #b1bd6c;           /* her nav pill and wave */
  --sage-wash: #d6dbb2;
  --olive: #4e5529;          /* her nav text */
  --night: #191b3a;          /* device bezels and the photo viewer */
  --white: #ffffff;

  --font-display: "Young Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Avenir Next", "Century Gothic", "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-label: 0.78rem;
  --fs-small: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  --fs-title: clamp(2.6rem, 1.5rem + 4.6vw, 5.6rem);
  --fs-name: clamp(3.8rem, 1.2rem + 10.5vw, 10.5rem);

  --gutter: clamp(16px, 4.5vw, 56px);
  --max: 1280px;
  --gap: clamp(10px, 1.2vw, 16px);
  --radius: 6px;
  --wave-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 5.5C9 1.5 18 .8 29 3.6S50 9.4 62 6.2 85 .2 100 3.8V96.2C91 99.4 80 99.6 69 96.6S48 90.8 36 93.8 13 99.8 0 96Z'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--sage); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; }

.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); top: 12px; z-index: 30; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 4px; }

/* Shared horizontal frame: every band's inner content sits in the same column. */
.masthead__inner, main > *, .quote blockquote, .contact__inner, .contact__foot {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
main > .quote { max-width: none; padding-left: 0; padding-right: 0; }

/* ----------------------------------------------------------------- header */
.masthead { position: relative; z-index: 5; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; }
.wordmark { font-family: var(--font-display); font-size: 1.4rem; text-decoration: none; line-height: 1; white-space: nowrap; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.nav a { font-weight: 500; font-size: 0.98rem; text-decoration: none; padding-block: 4px; background: linear-gradient(var(--sage), var(--sage)) left bottom / 0 3px no-repeat; transition: background-size .25s ease; }
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 3px; }
.menu-toggle { display: none; }

@media (max-width: 860px) {
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--sage-wash); color: var(--olive); border: 0; border-radius: 999px;
    padding: 8px 16px; font-weight: 600; font-size: 0.95rem; cursor: pointer;
  }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); box-shadow: 0 18px 30px -24px rgba(25, 27, 58, .5); }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 4px max(var(--gutter), env(safe-area-inset-right, 0px)) 20px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .nav li a { display: block; padding: 12px 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; background: none; border-bottom: 1px solid var(--periwinkle-soft); }
  .nav li:last-child a { border-bottom: 0; }
}

/* ------------------------------------------------------------------- cover */
.cover {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  padding-block: clamp(20px, 4vw, 56px) clamp(56px, 8vw, 120px);
}
.cover__text { display: grid; gap: clamp(18px, 2.4vw, 30px); min-width: 0; }
.cover__name { font-size: var(--fs-name); line-height: 0.86; letter-spacing: -0.025em; }
.cover__name span { display: block; }
.cover__name-last { padding-left: 1.05em; }
.cover__intro { font-size: var(--fs-lede); max-width: 46ch; line-height: 1.6; }
.cover__links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.link-arrow { font-weight: 500; text-decoration: none; border-bottom: 2px solid var(--sage); padding-bottom: 2px; }
.link-arrow::after { content: " →"; transition: margin .2s ease; }
.link-arrow:hover::after { margin-left: 4px; }
.cover__photo { position: relative; max-width: 460px; justify-self: end; width: 100%; }
.cover__photo::before {
  content: ""; position: absolute; inset: 0; transform: translate(14px, 16px);
  background: var(--periwinkle); -webkit-mask: var(--wave-frame) center / 100% 100% no-repeat; mask: var(--wave-frame) center / 100% 100% no-repeat;
}
.cover__photo img {
  position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 50%;
  -webkit-mask: var(--wave-frame) center / 100% 100% no-repeat; mask: var(--wave-frame) center / 100% 100% no-repeat;
}

@media (max-width: 760px) {
  .cover { grid-template-columns: 1fr; }
  .cover__photo { justify-self: start; max-width: 380px; order: -1; margin-right: 14px; }
  .cover__photo img { aspect-ratio: 5 / 4; }
}

/* ------------------------------------------------------------------- quote */
.quote { background: var(--periwinkle); }
.quote blockquote { margin: 0 auto; padding-block: clamp(48px, 7vw, 96px); display: grid; gap: 18px; }
.quote p {
  font-family: var(--font-display); font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.12;
  max-width: 22ch; text-wrap: balance; text-indent: -0.42em;
}
.quote p::before { content: "“"; }
.quote p::after { content: "”"; }
.quote footer { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .78; }

/* -------------------------------------------------------------------- work */
.section-title { font-size: var(--fs-h2); }
.work { padding-block: clamp(56px, 7vw, 104px) clamp(32px, 5vw, 72px); }
/* One level row: same-size square tiles, titles and blurbs on a shared baseline. */
.work__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px) clamp(16px, 2.2vw, 32px);
  margin-top: clamp(24px, 3vw, 40px);
}
.work-item { display: grid; gap: 8px; align-content: start; min-width: 0; }
.work-item__link { display: grid; gap: 14px; text-decoration: none; }
.work-item__img { display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-deep); }
.work-item__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .6s ease; }
.work-item__img--contain img { object-fit: contain; padding: 8%; }
.work-item__link:hover img { transform: scale(1.03); }
.work-item__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.8rem); line-height: 1.1; }
.work-item__title::after { content: " →"; font-family: var(--font-body); font-size: .7em; vertical-align: .08em; opacity: 0; transition: opacity .2s ease; }
.work-item__link:hover .work-item__title::after { opacity: 1; }
.work-item__blurb { color: var(--ink-soft); font-size: var(--fs-small); max-width: 40ch; }

@media (max-width: 1000px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .work__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------- about */
.about {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
  padding-block: clamp(48px, 7vw, 110px);
}
.about__text { display: grid; gap: 26px; min-width: 0; }
.about__media { position: sticky; top: 24px; width: 100%; max-width: 420px; justify-self: end; }
.about__video { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); background: var(--night); }
.prose { display: grid; gap: 1.05em; max-width: 62ch; }
.prose p { line-height: 1.7; }
.prose strong { font-weight: 600; }
.prose a { text-decoration-color: var(--sage); text-decoration-thickness: 2px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; }

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .about__media { position: static; max-width: 420px; }
}

/* ------------------------------------------------------------------ skills */
.skills { padding-block: clamp(24px, 4vw, 48px) clamp(80px, 10vw, 140px); display: grid; gap: 18px; }
.skills__text { font-size: var(--fs-lede); max-width: 44ch; }
.skills__logos { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.skills__logos li { display: grid; gap: 10px; justify-items: start; }
.skills__logo { display: grid; place-items: center; width: 120px; height: 92px; padding: 14px; background: var(--white); border-radius: 14px; }
.skills__logo img { max-height: 64px; width: auto; object-fit: contain; }
.skills__name { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }

/* -------------------------------------------------------------- page heads */
.page-head { padding-block: clamp(24px, 5vw, 72px) clamp(28px, 4vw, 56px); display: grid; gap: 14px; }
.page-title { font-size: var(--fs-title); line-height: 0.95; letter-spacing: -0.02em; max-width: 16ch; overflow-wrap: break-word; }
.page-head--project .page-title { max-width: 20ch; }
.page-lede { font-size: var(--fs-lede); max-width: 54ch; color: var(--ink-soft); }
.page-meta { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.crumb a { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); }
.crumb a::before { content: "← "; }
.crumb a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ albums */
.albums {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 72px) clamp(20px, 4vw, 56px); align-items: start;
  padding-bottom: clamp(72px, 9vw, 130px);
}
.album-card:nth-child(even) { margin-top: clamp(0px, 7vw, 100px); }
.album-card a { display: grid; gap: 14px; text-decoration: none; }
.album-card__img { display: block; overflow: hidden; border-radius: var(--radius); }
.album-card__img img { width: 100%; transition: transform .6s ease; }
.album-card a:hover img { transform: scale(1.025); }
.album-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.album-card__title { font-family: var(--font-display); font-size: var(--fs-h3); }
.album-card__count { font-size: var(--fs-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .albums { grid-template-columns: 1fr; }
  .album-card:nth-child(n) { margin-top: 0; }
}

/* ----------------------------------------------------------------- gallery */
.gallery { display: grid; gap: var(--gap); padding-bottom: clamp(56px, 8vw, 110px); }
.gallery__row { display: flex; gap: var(--gap); align-items: flex-start; width: 100%; max-width: min(100%, calc(var(--row-ratio) * 78vh)); margin-inline: auto; }
.gallery__item { flex: var(--ratio) 1 0%; min-width: 0; }
.gallery__item a { display: block; overflow: hidden; border-radius: 3px; background: var(--paper-deep); cursor: zoom-in; }
.gallery__item img { width: 100%; transition: transform .6s ease, opacity .3s ease; }
.gallery__item a:hover img { transform: scale(1.015); }
.gallery__item figcaption, .pin figcaption, .story__media figcaption { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 8px; }
@media (max-width: 640px) {
  .gallery__row { flex-direction: column; max-width: none; }
  .gallery__item { width: 100%; flex: none; }
}

/* --------------------------------------------------------------- pinboard */
.pinboard { column-count: 3; column-gap: clamp(16px, 2vw, 28px); padding-bottom: clamp(56px, 8vw, 110px); }
.pin { break-inside: avoid; margin-bottom: clamp(16px, 2vw, 28px); background: var(--paper-deep); border-radius: 4px; padding: clamp(14px, 2vw, 26px); }
.pin a { display: block; cursor: zoom-in; }
.pin img { width: 100%; margin-inline: auto; }
@media (max-width: 1100px) { .pinboard { column-count: 2; } }
@media (max-width: 620px) { .pinboard { column-count: 1; } }

/* ---------------------------------------------------------------- projects */
.projects {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px);
  padding-bottom: clamp(72px, 9vw, 130px);
}
.project-card a { display: grid; gap: 14px; text-decoration: none; }
.project-card__img { display: block; overflow: hidden; border-radius: var(--radius); background: var(--periwinkle-soft); }
.project-card__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 20%; transition: transform .6s ease; }
.project-card a:hover img { transform: scale(1.025); }
.project-card__title { font-family: var(--font-display); font-size: var(--fs-h3); }
.project-card__title::after { content: " →"; font-family: var(--font-body); font-size: .7em; opacity: 0; transition: opacity .2s ease; }
.project-card a:hover .project-card__title::after { opacity: 1; }
@media (max-width: 640px) { .projects { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- story */
.story { display: grid; gap: clamp(56px, 8vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.story__block {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 96px); align-items: center;
}
.story__text { font-size: 1.125rem; min-width: 0; }
.story__media { min-width: 0; display: grid; justify-items: center; }
.story__block--media-left .story__media { order: -1; }
.story__block--media-full, .story__block--no-text, .story__block--no-media { grid-template-columns: minmax(0, 1fr); }
.story__block--media-full .story__media { max-width: 1040px; width: 100%; }
.story__block--media-full .story__text { order: -1; }
.story__media a { display: block; cursor: zoom-in; }

.frame { width: 100%; }
.frame--none .frame__screen img, .frame--none .frame__screen video { border-radius: var(--radius); width: 100%; }
.frame--phone { width: min(300px, 78vw); }
.frame--phone .frame__screen { background: var(--night); padding: 9px; border-radius: 40px; box-shadow: 0 30px 50px -30px rgba(25, 27, 58, .55); }
.frame--phone .frame__screen img, .frame--phone .frame__screen video { width: 100%; border-radius: 31px; background: var(--night); }
.frame--laptop { position: relative; padding-bottom: 16px; }
.frame--laptop .frame__screen { background: var(--night); padding: 12px 12px 14px; border-radius: 16px 16px 4px 4px; }
.frame--laptop .frame__screen video, .frame--laptop .frame__screen img { width: 100%; border-radius: 3px; }
.frame--laptop::after {
  content: ""; position: absolute; left: -7%; right: -7%; bottom: 0; height: 16px;
  background: linear-gradient(#e2e3ea, #b9bccb); border-radius: 2px 2px 14px 14px;
}

@media (max-width: 760px) {
  .story__block { grid-template-columns: 1fr; }
  .story__block--media-left .story__media { order: 0; }
  .frame--laptop { width: 86%; }
}

/* --------------------------------------------------------------- next link */
.next { padding-bottom: clamp(72px, 9vw, 120px); }
.next a { display: inline-grid; gap: 6px; text-decoration: none; }
.next__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; }
.next__title::after { content: " →"; font-family: var(--font-body); font-size: .55em; vertical-align: .12em; }
.next a:hover .next__title { text-decoration: underline; text-decoration-color: var(--sage); text-decoration-thickness: 3px; text-underline-offset: .12em; }

/* ----------------------------------------------------------------- contact */
.contact { position: relative; background: var(--sage-wash); color: var(--olive); margin-top: 90px; }
.contact__edge { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(36px, 6vw, 90px); fill: var(--sage-wash); }
.contact__inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px); align-items: end;
  padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 72px);
}
.contact__lead { display: grid; gap: 12px; min-width: 0; }
.contact .label { color: var(--olive); }
.contact__line { font-family: var(--font-display); color: var(--ink); font-size: clamp(2.8rem, 1.4rem + 6vw, 7rem); line-height: .92; letter-spacing: -0.02em; text-wrap: balance; }
.contact__details { margin: 0; display: grid; gap: 14px; min-width: 0; }
.contact__details div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; border-top: 1px solid rgba(78, 85, 41, .28); padding-top: 12px; }
.contact__details dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.contact__details dd { margin: 0; font-size: 1.1rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.contact__details a { text-decoration-color: var(--sage); text-decoration-thickness: 2px; }
.contact__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px max(22px, env(safe-area-inset-bottom, 0px)); font-size: var(--fs-small); border-top: 1px solid rgba(78, 85, 41, .28); }
@media (max-width: 760px) {
  .contact__inner { grid-template-columns: 1fr; }
  .contact__details div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(25, 27, 58, .96); color: var(--paper);
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.lightbox__stage { display: grid; place-items: center; min-height: 0; gap: 10px; align-content: center; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 2px; }
.lightbox__caption { font-size: var(--fs-small); opacity: .85; text-align: center; max-width: 60ch; }
.lightbox__bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 10px; }
.lightbox__count { margin-right: auto; font-variant-numeric: tabular-nums; font-size: var(--fs-small); opacity: .8; }
.lightbox__btn { background: transparent; border: 1px solid rgba(250, 243, 240, .35); color: var(--paper); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 500; }
.lightbox__btn:hover { background: rgba(250, 243, 240, .12); }
.lightbox__btn:focus-visible { outline-color: var(--periwinkle); }
.has-lightbox { overflow: hidden; }

/* ----------------------------------------------------------------- misc */
.page-head--missing { padding-block: clamp(60px, 10vw, 140px); }
@media (max-width: 640px) {
  .quote p { text-indent: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}