@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: .8rem;
  --padding: 1lh;
  --line-height: 1.25;
  --text-big: 1.5em;

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

  /* colors */

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


  --yellow: #F4CB24;
  --yellow-light: color-mix(in srgb, var(--yellow) 50%, white);
  --yellow-mid: color-mix(in srgb, var(--yellow) 65%, black);
  --yellow-dark: color-mix(in srgb, var(--yellow) 10%, black);

  --blue: #0099D4;
  --blue-light: color-mix(in srgb, var(--blue) 50%, white);
  --blue-mid: color-mix(in srgb, var(--blue) 65%, black);
  --blue-dark: color-mix(in srgb, var(--blue) 10%, black);

  --red: #db2834;
  --red-light: color-mix(in srgb, var(--red) 50%, white);
  --red-mid: color-mix(in srgb, var(--red) 65%, black);
  --red-dark: color-mix(in srgb, var(--red) 10%, black);

  --green: #008b20;
  --green-light: color-mix(in srgb, var(--green) 50%, white);
  --green-mid: color-mix(in srgb, var(--green) 25%, black);
  --green-dark: color-mix(in srgb, var(--green) 10%, black);

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

/* color-themes for buildings */
[data="cottage"] {
  --light: var(--red-light);
  --reg: var(--red);
  --mid: var(--red-mid);
  --dark: var(--red-dark);
  --cntrst: var(--blue);
  --cntrst-l: var(--blue-light);
  --cntrst-d: var(--blue-mid);
}

[data="default"],
[data="main-house"] {
  --light: var(--yellow-light);
  --reg: var(--yellow);
  --mid: var(--yellow-mid);
  --dark: var(--yellow-dark);
  --cntrst: var(--red);
  --cntrst-l: var(--red-light);
  --cntrst-d: var(--red-mid);
}

[data="apartment"],
[data="newcomb-hollow-beach"] {
  --light: var(--blue-light);
  --reg: var(--blue);
  --mid: var(--blue-mid);
  --dark: var(--blue-dark);
  --cntrst: var(--yellow);
  --cntrst-l: var(--yellow-light);
  --cntrst-d: var(--yellow-mid);
}

[data="slough-pond"],
[data="wellfleet-woods"] {
  --light: var(--green-light);
  --reg: var(--green);
  --mid: var(--green-mid);
  --dark: var(--green-dark);
  --cntrst: var(--blue);
  --cntrst-l: var(--blue-light);
  --cntrst-d: var(--blue-mid);
}



* {
  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);
}


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

  margin: 0 auto;
  /* padding: var(--padding); */

  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: 1lh repeat(12, 1fr) 1lh;

  background-color: var(--yellow);

}

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

header {
  z-index: 2;
}

.header-main {
  display: grid;
  /* grid-template-columns: repeat(12, 1fr); */
  grid-template-columns: subgrid;
  grid-column: 2 / -2;
  padding-top: 2lh;
  padding-bottom: 1lh;

  & .logo-s {
    grid-column: 2 / 3;
    /* font-weight: bold; */
    /* color: var(--white); */
  }

  & .current-page {
    grid-column: 3 / -4;
  }

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

  & .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;
}

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

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

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

  & .pages-menu {
    grid-column: 5 / -3;
    /* background-color: red; */
    /* padding-top: 1lh; */
    /* display: flex;
    flex-direction: row;
    align-content: stretch; */
    display: grid;
    grid-template-columns: subgrid;
    gap: 1lh;

    & .other-pages,
    .building {
      /* flex: 1; */
      grid-column: span 2;
    }

    & .area {
      /* flex: 1; */
      grid-column: span 4;
    }


  }

  & .rentals {
    color: var(--blue-light);
  }

}

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

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

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

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

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

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

}

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

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

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

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

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

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

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 */