/* ==========================================================================
   WILLOW BEND: projects page
   Loaded after style.css. Everything here is scoped to projects.html.
   Metrics measured 1:1 against the reference at 1440x900.
   ========================================================================== */

/* header: white bar with ink text from the top of the page, hairline under
   the content zone only (the rail stays clean) */

.site-header { background: var(--paper); }
.site-header .brand-lockup { color: var(--ink); }
.site-header .header-cta { color: var(--ink); }
.site-header .header-cta .arrow-link.on-dark { color: var(--ink); }
.site-header .header-cta .rule { display: none; }
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: var(--rail);
  bottom: 0;
  height: 1px;
  background: #e5e5e5;
}

/* this page has no ink rail band: the sections run full bleed and the rail
   column simply shows each band's own background */
main { background: var(--paper); }
main::after { content: none; }

/* bar-and-arrow icon: vertical hairline + shaft; on hover the top and bottom
   rules sweep right, then the right edge closes the box (matched timings) */

.icon-box {
  position: relative;
  flex: none;
  width: 41px;
  height: 41px;
}

.icon-box svg { display: block; width: 100%; height: 100%; overflow: visible; }
.icon-box svg line,
.icon-box svg path {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-miterlimit: 10;
}

.icon-box::before {
  content: "";
  position: absolute;
  inset: 0 100% 0 0;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transition: right 0.2s linear 0.1s;
}

.icon-box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: rgb(2, 1, 1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 100%, 0% 100%);
  transition: clip-path 0.1s linear;
}

.arrow-link.go { gap: 11px; font-size: 24px; }

/* page title band ---------------------------------------------------------- */

.proj-title {
  background: var(--paper);
  padding: 224px var(--rail) 127px var(--gutter);
}

/* featured rows ------------------------------------------------------------ */

.featured {
  background: var(--paper);
  padding: 0 var(--rail) 160px var(--gutter);
  overflow: hidden;   /* contains the 110vw slab, as on the reference */
}

.frow {
  position: relative;
  margin: 0 0 96px;
}

.frow:last-child { margin-bottom: 0; }



/* the row box carries the hover state: a hairline frame and 24px of breathing
   room that inset the whole row while it is under the pointer */
.frow-box {
  position: relative;
  display: grid;
  align-items: stretch;
  column-gap: 24px;
  border: 1px solid transparent;
  padding: 0;
  transition: 0.5s;
}

.frow.img-left .frow-box { grid-template-columns: minmax(0, 1fr) 396px; }
.frow.img-right .frow-box { grid-template-columns: 396px minmax(0, 1fr); }

.frow .photo { position: relative; display: block; min-width: 0; }
.frow .photo img {
  display: block;
  width: 100%;
  height: 419px;
  object-fit: cover;
}

/* bottom-up ink gradient for caption legibility, hover only */
.frow .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(33, 33, 35, 0), rgb(33, 33, 35));
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

/* spaces note over the photo's bottom-left corner, hover only */
.photo-note {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: 390px;
  padding: 26px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.5s;
}

.frow .info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
}

.frow .kicker {
  display: block;
  font-size: 24px;
  line-height: 28px;
  color: #606065;
  margin-bottom: 10px;
}

.frow-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--ink);
  max-width: 353px;
}

.frow .arrow-link { margin: 65px 0 -3px; }

/* the whole row is one link; the button underneath is decoration for pointers */
.row-link { position: absolute; inset: 0; z-index: 5; }

/* box-draw on row hover */
.frow:hover .icon-box::before { right: 0; transition: right 0.2s linear; }
.frow:hover .icon-box::after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 50%, 100% 50%, 100% 100%, 0% 100%);
  transition: clip-path 0.1s linear 0.2s;
}

/* inset frame + caption reveal are pointer-only, as on the reference */
@media (hover: hover) and (pointer: fine) {
  .frow:hover .frow-box { padding: 24px; border-color: #a0a1a5; }
  .frow:hover .photo::after { opacity: 0.65; }
  .frow:hover .photo-note { opacity: 1; }
}


/* project gallery ----------------------------------------------------------- */

.gallery {
  background: var(--ink);
  padding: 158px var(--rail) 97px var(--gutter);
}

.gallery-head { color: var(--paper); }

/* filter: a summary row over a hairline; the term panel expands in flow and
   pushes the grid down, closed and opened without animation */

.filter-bar { margin-top: 42px; }

.filter-row {
  position: relative;
  height: 29px;
  border-bottom: 1px solid #a0a1a5;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  height: 29px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.filter-label {
  line-height: 29px;
  padding-right: 12px;
  border-right: 1px solid #a0a1a5;
}

.filter-toggle .chev { width: 13px; height: 8px; display: block; margin-left: 10px; }
.filter-bar.is-open .chev { transform: rotate(180deg); }

.filter-clear {
  position: absolute;
  top: 0;
  right: 64px;
  height: 29px;
  display: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #a0a1a5;
  font-family: var(--font-body);
  font-size: 16px;
}

.filter-bar.is-open .filter-clear { display: block; }

.filter-panel {
  display: none;
  border-bottom: 1px solid #a0a1a5;
  padding: 16px 0 15px;
}

.filter-bar.is-open .filter-panel { display: block; }

.filter-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4;
  column-gap: 16px;
}

.filter-menu li { break-inside: avoid; }

.filter-menu button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 29px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  text-align: left;
}

.filter-menu .box {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid #a0a1a5;
}

.filter-menu button.is-active .box { background: #a0a1a5; }

/* tile grid: 3 columns, 30px gutters, 380px tiles */

.tile-grid {
  margin-top: 94px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.tile {
  position: relative;
  display: block;
  height: 380px;
  overflow: hidden;
}

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* constant top-and-bottom ink gradient for text legibility */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgb(33, 33, 35) 0%, rgba(33, 33, 35, 0) 25%, rgba(33, 33, 35, 0) 75%, rgb(33, 33, 35) 100%);
  opacity: 0.8;
}

/* hover veil */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--ink);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.3s;
}

.tile:hover::after { opacity: 0.5; }

.tile-name {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
}

/* spaces list, bottom-left, revealed on hover and clipped like the reference */
.tile-spaces {
  position: absolute;
  left: 32px;
  bottom: 32px;
  width: 236px;
  max-height: 109px;
  overflow: hidden;
  z-index: 2;
  opacity: 0;
  transition: 0.3s;
}

.tile-spaces span {
  display: block;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  color: var(--paper);
  border-bottom: 1px solid var(--paper);
}

.tile-spaces span:last-child { border-bottom: 0; }

.tile:hover .tile-spaces { opacity: 1; }

.tile .icon-box {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 2;
  color: var(--paper);
}

.tile .icon-box::before { transition: right 0.22s linear 0.11s; }
.tile .icon-box::after { background: var(--paper); transition: clip-path 0.11s linear; }
.tile:hover .icon-box::before { right: 0; transition: right 0.22s linear; }
.tile:hover .icon-box::after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 50%, 100% 50%, 100% 100%, 0% 100%);
  transition: clip-path 0.11s linear 0.22s;
}

/* design cta ---------------------------------------------------------------- */

.design-cta {
  position: relative;
  background: #f2f2f2;
  overflow: hidden;
  min-height: 1044px;
  padding: 392px var(--rail) 0 var(--gutter);
}

.cta-plan {
  position: absolute;
  left: 332px;
  right: 0;
  top: 166px;
  height: 640px;
  display: flex;
  align-items: center;
  color: #dcdcdc;
  pointer-events: none;
}

.cta-plan svg { width: 100%; height: auto; max-height: 100%; display: block; }

.cta-copy { position: relative; z-index: 2; max-width: 280px; }

.cta-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0.02em;
  color: #606065;
  margin-bottom: 24px;
}

.cta-head {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.172;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--ink);
}

.design-cta .arrow-link { margin-top: 31px; }

.design-cta .arrow-link:hover .icon-box::before { right: 0; transition: right 0.2s linear; }
.design-cta .arrow-link:hover .icon-box::after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 50%, 100% 50%, 100% 100%, 0% 100%);
  transition: clip-path 0.1s linear 0.2s;
}

/* mobile --------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .site-header::after { right: 0; }

  .proj-title { padding: 215px var(--gutter) 80px; }
  .proj-title h1 { font-size: 40px; line-height: 1.1; }

  .featured { padding: 0 0 90px; }

  .frow { margin-bottom: 80px; }
  .frow:last-child { margin-bottom: 0; }

  .frow-box,
  .frow.img-left .frow-box,
  .frow.img-right .frow-box {
    display: flex;
    flex-direction: column;
    border: 0;
    padding: 0;
  }

  .frow .photo { order: -1; }
  .frow .photo img { width: 100%; height: auto; aspect-ratio: 195 / 128; }
  .photo-note { display: none; }

  .frow .info { padding: 24px var(--gutter) 0; }

  .frow .kicker { font-size: 18px; margin-bottom: 8px; }
  .frow-title { font-size: 32px; line-height: 1.125; max-width: none; }
  .frow .arrow-link { margin: 34px 0 0; font-size: 18px; gap: 9px; }
  .frow .icon-box, .design-cta .icon-box { width: 24px; height: 24px; }

  /* the slab shrinks with the layout: it still hangs off row 3 and reaches
     across the row gap to the next photo */
  .frow:nth-of-type(3)::before {
    top: 180px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 110vw;
    height: 564px;
  }

  /* on mobile only row 3 sits on ink; rows 4 and 5 return to paper */
  .frow.is-dark .kicker { color: #606065; }
  .frow.is-dark .frow-title { color: var(--ink); }
  .frow.is-dark .arrow-link { color: var(--ink); }
  .frow.is-dark .icon-box::after { background: rgb(2, 1, 1); }

  .frow.mob-dark .kicker { color: #a0a1a5; }
  .frow.mob-dark .frow-title { color: var(--paper); }
  .frow.mob-dark .arrow-link { color: var(--paper); }
  .frow.mob-dark .icon-box::after { background: var(--paper); }

  .gallery { padding: 102px var(--gutter) 90px; }
  .gallery-head { font-size: 40px; }

  .filter-bar { margin-top: 50px; }
  .filter-clear { right: 0; }
  .filter-menu { columns: 2; }

  .tile-grid { margin-top: 56px; grid-template-columns: 1fr; gap: 30px; }
  .tile { height: auto; aspect-ratio: 340 / 223; }
  .tile-name { font-size: 24px; line-height: 1.17; top: 22px; left: 22px; right: 22px; }
  .tile-spaces { left: 22px; bottom: 22px; }
  .tile .icon-box { right: 22px; bottom: 22px; width: 24px; height: 24px; }

  .design-cta { min-height: 0; padding: 71px var(--gutter) 90px; }
  .design-cta .frost { display: none; }
  .cta-plan { position: static; height: auto; margin: 0 0 24px; }
  .cta-copy { max-width: none; }
  .cta-kicker { font-size: 18px; margin-bottom: 14px; }
  .cta-head { font-size: 40px; }
  .design-cta .arrow-link { font-size: 18px; margin-top: 24px; }
}

/* over the ink gallery band the returned header wears the dark skin */
body.over-dark .site-header.is-solid { background: var(--ink); border-bottom-color: rgba(255, 255, 255, 0.25); }
body.over-dark .site-header.is-solid .brand-lockup,
body.over-dark .site-header.is-solid .header-cta,
body.over-dark .site-header.is-solid .header-cta .arrow-link.on-dark { color: var(--paper); }