@font-face {
  font-family: "gro-reg";
  src:
    local("gro-reg"),
    url("../fonts/gro-reg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "gro-bld";
  src:
    local("gro-bld"),
    url("../fonts/gro-bld.woff2") format("woff2");
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}


:root {
  /* typography */

  --base: .85rem;
  --px: 1lh;
  --py: 1lh;
  --pxy: 1lh;
  --line-height: 1.25;
  --text-big: 1.5em;



  --font-family: "gro-reg";
  --font-size: clamp(var(--base), var(--base) + 0.7vw, 1.7rem);

  /* colors */

  --black: #111111;
  --white: #fff;
  --off-black: color-mix(in srgb, var(--black) 98%, white);
  --off-white: color-mix(in srgb, var(--white) 98%, black);

  --yellow: #F4CB24;
  --blue: #0099D4;
  --red: #db2834;
  --green: #008b20;

  --color-text: var(--black);
  --color-background: var(--white);


}

/* color themes for buildings */
[data="cottage"] {
  --color: var(--red);
  --color-contrast: var(--blue);
}

[data="main-house"] {
  --color: var(--yellow);
  --color-contrast: var(--red);
}

[data="apartment"],
[data="newcomb-hollow-beach"] {
  --color: var(--blue);
  --color-contrast: var(--yellow);
}

[data="default"] {
  --color: var(--yellow);
  --color-contrast: var(--blue);
}

[data="slough-pond"],
[data="wellfleet-woods"] {
  --color: var(--green);
  --color-contrast: var(--blue);
}

/* derived color mixes — defined here so they recompute in any themed [data] scope,
   not just on body */
body,
[data] {
  --light: color-mix(in srgb, var(--color) 50%, white);
  --mid: color-mix(in srgb, var(--color) 65%, black);
  --dark: color-mix(in srgb, var(--color) 12%, black);
  --cntrst: var(--color-contrast);
  --cntrst-l: color-mix(in srgb, var(--color-contrast) 50%, white);
  --cntrst-d: color-mix(in srgb, var(--color-contrast) 65%, black);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: var(--line-height);
  scrollbar-width: none;
  /* overflow: -moz-scrollbars-none; */
  -ms-overflow-style: none;
}

html {
  color: var(--color-text);
  background: var(--color-background);
  background-color: var(--yellow);

}

body {
  /* -webkit-font-smoothing: antialiased; */
  /* -moz-osx-font-smoothing: grayscale; */

  margin: 0 auto;

  font-family: var(--font-family), Arial, Helvetica, sans-serif;
  font-size: var(--font-size);
  letter-spacing: 0.02rem;

  scroll-behavior: smooth;
  touch-action: manipulation;

  display: grid;
  grid-template-columns: 0 repeat(12, 1fr) 0;
  column-gap: var(--px);

  @media (width <=1068px) {
    grid-template-columns: 0 repeat(8, 1fr) 0;
  }

  @media (width <=768px) {
    --px: 0.5lh;
    --py: 1lh;
    --pxy: 1lh;
  }

}

::-moz-selection,
::selection {
  color: var(--black);
  background: var(--off-white);
}

br {
  height: 1lh;
}

/* ------------------ Header */

header {
  z-index: 2;
}

.home-random {
  grid-row: 1;
  grid-column: 1 / -1;
}

#icon-x {
  grid-column: 6 / -4;
}

.header-main {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 2 / -2;
  padding-top: 2lh;
  padding-bottom: 1lh;

  & a {
    text-decoration: none;
  }

  & .logo-s {
    grid-column: 2 / 3;

    white-space: nowrap;

    @media (width <=1068px) {
      /* background-color: red; */
      grid-column: 1 / span 1;
    }
  }

  & .current-page {
    grid-column: span 2;

    @media (width <=768px) {
      /* background-color: green; */
      grid-column: span 2;
    }
  }

  & #icon-x {
    width: 1em;
    height: 1em;
    grid-column: -3;
    justify-self: right;

    @media (width <=768px) {
      grid-column: -2;
      justify-self: left;
    }
  }

  & .st-white {
    fill: var(--white);
  }

  & .st2 {
    fill: none;
    stroke: var(--black);
    stroke-width: .15em;
    vector-effect: non-scaling-stroke;
  }

  & .st0,
  .st1 {
    stroke: var(--black);
    stroke-width: .05em;
    vector-effect: non-scaling-stroke;

  }


}


.st-white {
  fill: var(--white);
}

.st2 {
  fill: none;
  stroke: var(--black);
  stroke-width: .15em;
  vector-effect: non-scaling-stroke;
}

.st0,
.st1 {
  stroke: var(--black);
  stroke-width: .05em;
  vector-effect: non-scaling-stroke;

}

/* ------------------ Main */

main {
  grid-column: 1 / -1;
  background-color: var(--yellow);

}

/* ------------------ Footer */

footer {
  display: grid;
  position: relative;
  grid-template-columns: subgrid;
  padding-top: 3lh;
  padding-bottom: 1lh;
  grid-column: 1 / -1;
  background-color: var(--mid);

  & ::after {
    content: "";
    display: block;
    position: fixed;
    background: var(--mid);
    inset: 0;
    top: 0px;
    bottom: 0px;
    bottom: auto;
    height: calc(100% + 100vh);
    z-index: -1;
    top: 50vh;
  }

  @media (width <=768px) {
    padding-top: 2lh;
    padding-bottom: 2lh;

  }

  & .logo-s {
    grid-column: 3 / 5;

    @media (width <=1068px) {
      grid-column: 2 / span 1;
      grid-row: 1;

    }
  }

  & .pages-menu {
    grid-column: 5 / -2;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--px);
    row-gap: 1lh;

    & .other-pages {
      grid-column: 3 / span 2;
    }

    & .building {
      grid-column: 1 / span 2;
      grid-row: 1;
    }

    & .area {
      grid-column: 6 / span 4;
      grid-row: 1;
      text-indent: calc(-1 * var(--px));
      padding-left: var(--px);

    }

    & .rentals {
      grid-row: 2;
    }

    & .copyright {
      grid-column: 6 / -1;
    }

    & .colophon {
      grid-column: 3 / span 2;
    }

    @media (width <=1068px) {
      grid-column: 3 / -1;


    }


    @media (width <=1068px) {

      grid-row: 1;

      & .other-pages {
        grid-column: 2 / span 2;
        grid-row: 1;
      }

      & .building {
        grid-column: 4 / span 4;
        grid-row: 1;

      }

      & .area {
        grid-row: 2;
        grid-column: 4 / span 4;
      }

      & .rentals {
        grid-row: 2;
        grid-column: 2;
      }

      & .copyright {
        padding-top: 1lh;
        grid-column: 4 / -1;
      }

    }

    @media (width <=768px) {

      grid-row: 1;

      & .area {
        grid-row: 2;
        /* grid-column: 3 / span 4; */
      }

      & .rentals {
        grid-row: 2;
      }

      & .copyright {
        padding-top: 1lh;
        grid-column: 1 / -1;
      }

    }

  }

  & .rentals {
    color: var(--cntrst-l);
  }

}

/* ------------------ Figure, Picture, IMG */

figure {
  /* display: grid; */
  /* grid-template-columns: 1lh repeat(12, 1fr) 1lh; */

  grid-column: 1 / -1;

  & picture {
    grid-column: 1 / -1;
  }

  & picture img {
    grid-column: 1 / -1;
  }
}

figcaption {
  grid-column: 3 / -3;
}

img {
  max-width: 100%;
  max-height: 100dvh;
  display: block;
  object-fit: contain;
}

/* ------------------ Link Underline */

a {
  color: currentColor;
  text-decoration: none;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
}

article a {
  text-decoration: underline;
  color: var(--cntrst-l);
}

/* ------------------ Typography */

p {
  /* max-width: 75ch; */
}

p+p {
  margin-top: -1lh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: var(--font-size);
  font-weight: 400;
}

ul,
ol,
details,
summary {
  list-style-type: none;
}

/* ------------------ General Purpose Classes */

strong {
  font-family: "gro-bld";
}







/* -------------- figure, picture, img */



.block-fig {

  display: grid;
  grid-template-columns: subgrid;

  /* padding-bottom: 1lh; */

  & picture {
    max-height: 100%;
    grid-column: 5 / span 4;
  }

  & img {
    max-height: 80vh;

  }
}

.bl-gal {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 3 / -2;

  @media (width <=1068px) {
    grid-column: 3 / -2;

  }

  & .bl-gal__title {
    padding-top: var(--py);
    grid-column: 1 / span 2;
    align-self: end;
    display: grid;
    grid-template-columns: subgrid;

    & h2 {
      font-family: "gro-bld";
      grid-column: span 3;
    }

    & .bl-gal__counter {
      grid-column: 1;
    }

    @media (width <=1068px) {
      grid-column: 1 / span 2;
      grid-row: 2;
    }

    @media (width <=568px) {
      grid-column: 1 / -1;

      & .bl-gal__counter {
        grid-column: span 2 / -1;
      }
    }

  }


  & picture {
    grid-column: 3 / -2;
    display: grid;
    grid-template-columns: subgrid;
    aspect-ratio: 5 / 4;

    @media (width <=1068px) {
      grid-column: 3 / -1;
      grid-row: 2;

    }

    @media (width <=568px) {
      grid-column: 1 / -1;
      grid-row: 1;
    }
  }

  & .total {
    color: var(--red);
  }

  & img {
    display: grid;
    grid-template-columns: subgrid;
    aspect-ratio: 5 / 4;
    grid-column: 2 / -2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;

    @media (width <=568px) {
      grid-column: 2 / -3;
    }

    &.is-landscape {
      grid-column: 1 / -1;
    }

    &.is-active {
      opacity: 1;
    }
  }
}


/* ------------------ Blog Stuff */


.blog {
  display: grid;
  grid-template-columns: subgrid;

  grid-row: 1;
  grid-column: 2 / -2;

  row-gap: var(--pxy);
  padding-bottom: 6lh;

  @media (width <=1068px) {
    grid-column: 1 / -1;
  }

  @media (width <=768px) {
    padding-bottom: 2lh;
  }

  & a {
    color: var(--cntrst-d);
  }

  &>h2 {
    grid-column: 3 / -1;
    padding-top: var(--py);
  }

  /* target first figure */

  & :first-child:has(picture):not(.bl-gal) picture {
    grid-column: span 4 / -3;

    @media (width <=1068px) {
      grid-column: span 4 / -2;
    }
  }

  /* paragraphs */

  & p {
    grid-column: 4 / -4;
    text-indent: calc((100% / 6) + .1lh);
    margin-right: -1lh;

    @media (width <=1068px) {
      grid-column: 3 / -3;
    }

    @media (width <=768px) {
      margin-right: 0;
      grid-column: 2 / -2;

    }
  }

  /* year entry */

  & .bl-yr+.bl-yr {
    margin-top: -1lh;
  }

  & .bl-yr {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 3 / -4;

    & p {
      grid-column: 2 / -1;
      text-indent: calc((100% / 6) + .1lh);
      grid-row: 1;
    }

    @media (width <=1068px) {
      grid-column: 2 / -3;
    }

    @media (width <=768px) {
      grid-column: 2 / -2;
    }

    & time,
    & .year {
      @media (width <=768px) {
        grid-row: 1;
        grid-column: 1 / 3;
      }
    }

  }

  /* Image Blocks */

  & .block-fig {
    display: grid;
    grid-template-columns: subgrid;

    & img {
      max-height: 90dvh;
    }
  }

  .block-fig--left {
    & picture {
      grid-column: 3 / 7;
    }
  }

  .block-fig--right {
    & picture {
      grid-column: 1 / -1;
    }

    & img {
      object-position: right;
    }
  }

  .block-fig--center {
    & picture {
      grid-column: 5 / -5;

      @media (width <=1068px) {
        grid-column: 4 / -4;
      }
    }

    & img {
      object-position: center;
    }

  }

  .block-fig--padded {
    & img {
      padding: 1lh;
      background-color: var(--off-black);
    }
  }

  .block-fig--full {
    width: 100vw;

    & picture {
      grid-column: 3 / -3;
    }

    & picture img {
      max-height: unset;
    }
  }

  .block-twoup {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 3 / -3;

    & .twoup-img-wrapper {
      grid-column: 1 / -1;
      grid-row: 1;
      display: flex;
      gap: var(--px);
      max-width: 100vw;
      align-items: start;

      & img {
        min-width: 0;
        max-height: unset;
        flex: 1;
      }
    }

    & figcaption {
      grid-column: 3 / -3;
      grid-row: 1;
      align-self: end;

    }
  }

  /* captions */

  figcaption p:empty {
    display: none;
  }

  figcaption {
    padding: 1lh 0;
  }

}