@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/golos-text/cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/golos-text/latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/golos-text/cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/golos-text/latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/golos-text/cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/golos-text/latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
Unlayered so these beat DaisyUI @layer base.
--color-primary is what .btn-primary copies into --btn-color / --btn-bg.
--default-font-family is what html uses for the page font.
*/
:root,
[data-theme="light"] {
  --color-primary: var(--brand-primary);
  --font-sans: var(--font-body);
  --default-font-family: var(--font-body);
}

a:not(.btn) {
  color: var(--brand-primary);
}

/*
Blinkstrap paints a drop shadow on .card and .btn.
The services grid uses a border instead.
*/
#services,
#services * {
  box-shadow: none;
}

/*
Text column beside the placeholder. Built-in blocks render as siblings,
so the section places the figure in the second column.
*/
#digital {
  background: var(--surface-light);
  border-top: 1px solid var(--brand-accent);
  border-bottom: 1px solid var(--brand-accent);
}

#digital,
#digital * {
  box-shadow: none;
}

#digital > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  box-sizing: border-box;
  padding: var(--section-sm) clamp(1rem, 4vw, 4rem);
}

#digital > .container > :not(figure) {
  grid-column: 1;
  min-width: 0;
}

#digital > .container > figure {
  grid-column: 2;
  grid-row: 1 / span 5;
  align-self: start;
  margin: 0;
}

#digital h2,
#digital p,
#digital ul {
  margin: 0;
}

#digital p:first-of-type {
  margin-bottom: 0.75rem;
  color: var(--brand-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#digital h2 {
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: calc(var(--scale-base) * 2);
  font-weight: 600;
  line-height: 1.2;
}

#digital p:nth-of-type(2) {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

#digital ul {
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}

#digital li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--brand-accent);
  color: var(--text-body);
  line-height: 1.45;
}

#digital li:last-child {
  border-bottom: 1px solid var(--brand-accent);
}

#digital p:nth-of-type(3) {
  margin-top: 1.25rem;
  color: var(--text-heading);
  font-weight: 600;
  line-height: 1.45;
}

#digital figure {
  overflow: hidden;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  line-height: 0;
}

#digital img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 800px) {
  #digital > .container {
    grid-template-columns: minmax(0, 1fr);
  }

  #digital > .container > :not(figure),
  #digital > .container > figure {
    grid-column: 1;
    grid-row: auto;
  }
}

/*
Text column, quote and list in the first track. The two figures share the
second track: the archive is 4:5 and the family photo is 3:2, so the second
figure is offset by the first image's height. Percentage margin is the column
width. Built-in blocks stay siblings, same as #digital.
*/
#story {
  background: var(--surface-light);
  border-top: 1px solid var(--brand-accent);
  border-bottom: 1px solid var(--brand-accent);
}

#story,
#story * {
  box-shadow: none;
}

#story > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  box-sizing: border-box;
  padding: var(--section-sm) clamp(1rem, 4vw, 4rem);
}

#story > .container > :not(figure) {
  grid-column: 1;
  min-width: 0;
}

#story > .container > figure {
  grid-column: 2;
  grid-row: 1 / span 8;
  align-self: start;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  line-height: 0;
}

#story > .container > figure:nth-of-type(2) {
  margin-top: calc(125% + 1.25rem);
}

#story h2,
#story p,
#story ul,
#story blockquote {
  margin: 0;
}

#story > .container > p:first-of-type {
  margin-bottom: 0.75rem;
  color: var(--brand-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#story h2 {
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: calc(var(--scale-base) * 2);
  font-weight: 600;
  line-height: 1.2;
}

#story > .container > p:nth-of-type(2),
#story > .container > p:nth-of-type(3),
#story > .container > p:nth-of-type(5) {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

#story > .container > p:nth-of-type(4) {
  margin-top: 1.25rem;
  max-width: 40rem;
  color: var(--text-heading);
  font-weight: 600;
  line-height: 1.45;
}

#story ul {
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}

#story li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--brand-accent);
  color: var(--text-body);
  line-height: 1.45;
}

#story li:last-child {
  border-bottom: 1px solid var(--brand-accent);
}

#story blockquote {
  margin-top: 1.5rem;
  max-width: 40rem;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 2px solid var(--brand-accent);
}

#story blockquote p {
  color: var(--text-heading);
  font-size: 1.125rem;
  line-height: 1.5;
}

#story cite {
  display: block;
  margin-top: 0.7rem;
  color: var(--brand-primary);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
}

#story img {
  display: block;
  width: 100%;
  height: auto;
}

#story > .container > figure:first-of-type img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

#story > .container > figure:nth-of-type(2) img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 800px) {
  #story > .container {
    grid-template-columns: minmax(0, 1fr);
  }

  #story > .container > :not(figure),
  #story > .container > figure {
    grid-column: 1;
    grid-row: auto;
  }

  #story > .container > figure,
  #story > .container > figure:nth-of-type(2) {
    width: 100%;
    margin-top: 1.25rem;
  }
}

/*
Text column beside one figure. Built-in blocks stay siblings, same as #digital.
The travel photo is 16:9.
*/
#travel {
  background: var(--surface-light);
  border-top: 1px solid var(--brand-accent);
  border-bottom: 1px solid var(--brand-accent);
}

#travel,
#travel * {
  box-shadow: none;
}

#travel > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  box-sizing: border-box;
  padding: var(--section-sm) clamp(1rem, 4vw, 4rem);
}

#travel > .container > :not(figure) {
  grid-column: 1;
  min-width: 0;
}

#travel > .container > link {
  display: none;
}

#travel > .container > figure {
  grid-column: 2;
  grid-row: 1 / span 8;
  align-self: start;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  line-height: 0;
}

#travel h2,
#travel p,
#travel ul,
#travel ol {
  margin: 0;
}

#travel p:first-of-type {
  margin-bottom: 0.75rem;
  color: var(--brand-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#travel h2 {
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: calc(var(--scale-base) * 2);
  font-weight: 600;
  line-height: 1.2;
}

#travel p:nth-of-type(2) {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

#travel ul,
#travel ol {
  margin-top: 1.25rem;
  color: var(--text-body);
}

#travel ul {
  padding: 0;
  list-style: none;
}

#travel ol {
  padding-left: 1.25rem;
  list-style: decimal;
}

#travel li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--brand-accent);
  line-height: 1.45;
}

#travel li:last-child {
  border-bottom: 1px solid var(--brand-accent);
}

#travel .link-buttons {
  margin-top: 1.5rem;
}

#travel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 800px) {
  #travel > .container {
    grid-template-columns: minmax(0, 1fr);
  }

  #travel > .container > :not(figure),
  #travel > .container > figure {
    grid-column: 1;
    grid-row: auto;
  }
}

/*
Closing visit block. The card and map are floated first so the copy sits
in the left column. Narrow screens drop the floats and reorder so the copy
stays above the card. Borders only; DaisyUI shadows are cleared here.
*/
#visit {
  background: var(--surface-light);
  border-top: 1px solid var(--brand-accent);
  border-bottom: 1px solid var(--brand-accent);
}

#visit,
#visit * {
  box-shadow: none;
}

#visit > .container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--section-sm) clamp(1rem, 4vw, 4rem);
}

#visit > .container > link {
  display: none;
}

#visit > .container > p:nth-of-type(1) { order: 1; }
#visit > .container > h2 { order: 2; }
#visit > .container > p:nth-of-type(2) { order: 3; }
#visit > .container > .link-buttons { order: 4; }
#visit > .container > p:nth-of-type(3) { order: 5; }
#visit > .container > .contact-details { order: 6; }
#visit > .container > figure { order: 7; }

#visit h2,
#visit > .container > p {
  margin: 0;
}

#visit > .container > p:nth-of-type(1) {
  margin-bottom: 0.75rem;
  color: var(--brand-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#visit h2 {
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: calc(var(--scale-base) * 2);
  font-weight: 600;
  line-height: 1.2;
}

#visit > .container > p:nth-of-type(2) {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

#visit > .container > .link-buttons {
  margin-top: 1.5rem;
}

#visit > .container > p:nth-of-type(3) {
  margin-top: 0.75rem;
  max-width: 40rem;
  color: var(--text-body);
  font-size: 0.9375rem;
  line-height: 1.45;
}

#visit .contact-details--card {
  width: 100%;
  max-width: none;
  margin-top: 1.5rem;
}

#visit > .container > figure {
  margin: 1.25rem 0 0;
  overflow: hidden;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  line-height: 0;
}

#visit img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 801px) {
  #visit > .container {
    display: flow-root;
  }

  #visit > .container > .contact-details,
  #visit > .container > figure {
    float: right;
    clear: right;
    width: calc((100% - 2.5rem) / 2.1);
    margin-left: 2.5rem;
  }

  #visit .contact-details--card {
    margin-top: 0;
    margin-bottom: 1.25rem;
  }

  #visit > .container > figure {
    margin-top: 0;
  }

  #visit > .container > p,
  #visit > .container > h2,
  #visit > .container > .link-buttons {
    margin-right: calc((100% - 2.5rem) / 2.1 + 2.5rem);
  }
}

/*
Blinkstrap paints a drop shadow on the command-palette modal and the drawer.
Borders stay as the Design System gives them.
*/
.modal-box,
#bl-drawer-aside {
  box-shadow: none;
}