/* =========================================================
   CHAINED DESIGN SYSTEM — EDIT THESE VARIABLES FIRST
   ========================================================= */

:root {
--accent: #00D422;
--green: var(--accent);
  --black: #000000;
  --white: #FFFFFF;
  --grey: #777777;
--line: var(--black);

  --font: "Cascadia Code", "Cascadia Mono", Consolas, monospace;

  --page-gutter: clamp(18px, 2.2vw, 42px);
  --section-gap: clamp(54px, 7vw, 112px);
  --header-height: 72px;

  --font-wordmark: clamp(32px, 3.1vw, 58px);
  --font-nav: 12px;
  --font-label: 12px;
  --font-body: 14px;
  --font-meta: 12px;
  --font-title: 30px;
  --font-artist: 44px;

  --image-landscape-max: 1050px;
  --image-portrait-max: 620px;

  --border: 1px solid var(--line);
}

/* =========================================================
   BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--font-body);
  line-height: 1.35;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

code {
  color: var(--green);
  font-family: var(--font);
}

::selection {
  background: var(--green);
  color: var(--black);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  height: var(--header-height);
  padding: 14px var(--page-gutter) 0;

  background: transparent;
  pointer-events: none;
}

.site-header a {
  pointer-events: auto;
}

.wordmark {
  color: var(--accent);
  font-size: clamp(30px, 3vw, 54px);
  line-height: 0.85;
  letter-spacing: -0.08em;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;

  padding-top: 1px;

  font-size: var(--font-nav);
  line-height: 1;
}

.main-nav .is-active,
.demo-nav .is-active {
  color: var(--green);
}

.hover-demo a:nth-child(3) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   LAYOUT
   ========================================================= */

main {
  padding: 0 var(--page-gutter);
}

.intro {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8vh 0 6vh;
  border-bottom: var(--border);
}

.eyebrow,
.section-label,
.spec {
  font-size: var(--font-label);
}

.eyebrow {
  color: var(--green);
}

.intro h1 {
  max-width: 1000px;
  margin: 12px 0 20px;
  font-size: clamp(38px, 6vw, 92px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.intro-copy {
  max-width: 700px;
  margin: 0;
}

.system-section {
  padding: var(--section-gap) 0;
  border-bottom: var(--border);
}

.section-label {
  margin-bottom: 34px;
}

/* =========================================================
   IDENTITY
   ========================================================= */

.identity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 44px 28px;
  align-items: end;
}

.wordmark-demo {
  color: var(--green);
  letter-spacing: -0.08em;
}

.wordmark-large {
  font-size: 70px;
}

.wordmark-medium {
  font-size: 52px;
  font-weight: 600;
}

.wordmark-small {
  font-size: 34px;
  font-weight: 700;
}

.spec {
  margin-top: 12px;
  color: var(--grey);
}

.colour-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 54px;
}

.swatch-block {
  min-width: 120px;
}

.swatch {
  width: 86px;
  height: 86px;
  border: 1px solid #BFBFBF;
}

.swatch-green { background: var(--green); border-color: var(--green); }
.swatch-black { background: var(--black); border-color: var(--black); }
.swatch-white { background: var(--white); }

/* =========================================================
   NAVIGATION STATES
   ========================================================= */

.navigation-states {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 48px;
}

.demo-nav {
  justify-content: flex-start;
}

/* =========================================================
   TYPE / METADATA / ACTIONS
   ========================================================= */

.split-section {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr 0.95fr;
  gap: 0;
}

.type-panel,
.metadata-panel,
.actions-panel {
  padding-right: 34px;
}

.metadata-panel,
.actions-panel {
  padding-left: 34px;
  border-left: var(--border);
}

.type-sample {
  margin-top: 24px;
}

.type-artist {
  font-size: var(--font-artist);
  font-weight: 600;
}

.type-title {
  font-size: var(--font-title);
}

.type-year,
.artist-link,
.year-link,
.text-link,
.metadata-block a,
.format-meta a {
  color: var(--green);
}

.type-meta {
  font-size: var(--font-meta);
}

.body-sample {
  max-width: 430px;
  margin-top: 32px;
  line-height: 1.45;
}

.text-link {
  display: inline-block;
  margin-top: 22px;
  font-size: var(--font-meta);
}

.metadata-variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.metadata-block {
  font-size: var(--font-meta);
}

.metadata-block + .metadata-block {
  padding-left: 28px;
  border-left: var(--border);
}

.metadata-block h2 {
  margin: 20px 0;
  font-size: 17px;
  font-weight: 400;
}

.metadata-block p {
  margin: 18px 0;
}

.action-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 100px;
  gap: 18px 22px;
  align-items: center;
}

.text-action,
.clear-button,
.tag {
  width: max-content;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.text-action:hover,
.text-action:focus-visible,
.clear-button:hover,
.clear-button:focus-visible,
.tag:hover,
.tag:focus-visible {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-action.is-success {
  color: var(--green);
}

.plain-action {
  width: max-content;
}

/* =========================================================
   ARCHIVE
   ========================================================= */

.archive-toolbar {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px) auto auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 26px;
  border-bottom: var(--border);
}

.toolbar-title {
  margin: 0 0 10px;
  font-size: var(--font-label);
}

.active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 26px;
}

.active-tags:empty::before {
  content: "NO ACTIVE FILTERS";
  color: var(--grey);
  font-size: var(--font-label);
}

.archive-search input {
  width: 100%;
  border: 1px solid var(--black);
  border-radius: 0;
  padding: 10px 12px;
  background: var(--white);
  color: var(--black);
  outline: none;
}

.archive-search input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}

.clear-button {
  color: var(--green);
  white-space: nowrap;
}

.result-count {
  font-size: var(--font-label);
  white-space: nowrap;
}

.tag-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 28px;
  padding: 28px 0 36px;
}

.tag-group p {
  margin: 0 0 12px;
  font-size: var(--font-label);
  color: var(--grey);
}

.tag {
  display: block;
  margin: 7px 0;
  font-size: var(--font-meta);
}

.tag.is-active {
  color: var(--green);
}

.archive-grid {
  columns: 4 250px;
  column-gap: 18px;
}

.archive-item {
  break-inside: avoid;
  margin-bottom: 26px;
}

.archive-item[hidden] {
  display: none;
}

.archive-item img {
  display: block;
  width: 100%;
  height: auto;
}

.archive-item p {
  margin: 8px 0 0;
  font-size: 11px;
}

/* =========================================================
   IMAGE FORMATS
   ========================================================= */

.format-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
  gap: 60px;
  align-items: start;
}

.format-card img {
  display: block;
  width: 100%;
  height: auto;
  background: #F5F5F5;
}

.format-landscape {
  max-width: var(--image-landscape-max);
}

.format-portrait {
  max-width: var(--image-portrait-max);
}

.format-meta {
  margin-top: 18px;
  font-size: var(--font-meta);
}

.format-meta h3 {
  margin: 12px 0;
  font-size: 17px;
  font-weight: 400;
}

.format-meta p {
  margin: 12px 0;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--page-gutter);
  font-size: var(--font-label);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
  .identity-grid,
  .navigation-states,
  .split-section,
  .format-grid {
    grid-template-columns: 1fr;
  }

  .metadata-panel,
  .actions-panel {
    padding: 42px 0 0;
    border-left: 0;
    border-top: var(--border);
    margin-top: 42px;
  }

  .type-panel {
    padding-right: 0;
  }

  .archive-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .tag-groups {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .site-header {
    position: static;
    flex-direction: column;
  }

  .main-nav {
    justify-content: flex-start;
  }

  .intro {
    min-height: 42vh;
  }

  .identity-grid,
  .navigation-states,
  .metadata-variants,
  .archive-toolbar,
  .tag-groups {
    grid-template-columns: 1fr;
  }

  .metadata-block + .metadata-block {
    padding: 28px 0 0;
    border-left: 0;
    border-top: var(--border);
  }

  .archive-grid {
    columns: 2 145px;
  }

  .colour-row {
    flex-wrap: wrap;
  }

  footer {
    flex-direction: column;
  }
}

/* =========================================================
   DISCOVER
   ========================================================= */

.discover-main {
  padding: 0 var(--page-gutter) 90px;
}

.discover-toolbar {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  right: var(--page-gutter);
  z-index: 25;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  padding: 0;
  border: 0;
  background: transparent;
}
.discover-toolbar .eyebrow {
  margin: 0;
}

.view-switch {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: var(--font-nav);
}

.view-button {
  border: 0;
  padding: 0;

  background: transparent;
  color: var(--black);

  font: inherit;
  cursor: pointer;
}

.view-button:hover,
.view-button:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.view-button.is-active {
  color: var(--accent);
}

.discover-stream {
  padding-top: calc(var(--header-height) + 24px);
}


/* SINGLE VIEW */

.discover-page[data-view="single"] .discover-stream {
  display: block;
}

.discover-page[data-view="single"] .discover-work {
  --discover-meta-width: clamp(190px, 17vw, 260px);
  --discover-gap: clamp(45px, 8vw, 150px);

  min-height: calc(100svh - 116px);

  display: grid;
  grid-template-columns:
    var(--discover-meta-width)
    minmax(0, 1fr);

  align-items: center;
  gap: var(--discover-gap);

  padding: 48px 0 70px;
  margin-bottom: 120px;
  border-bottom: 0;
}

.discover-page[data-view="single"] .discover-work:last-child {
  margin-bottom: 0;
}


/* METADATA */

.discover-page[data-view="single"] .discover-meta {
  position: relative;
  z-index: 2;

  align-self: center;
}

.discover-meta {
  font-size: var(--font-meta);
}

.discover-meta h2 {
  margin: 20px 0;

  font-size: 19px;
  line-height: 1.12;
  font-weight: 400;
}

.discover-details {
  margin-top: 24px;
}

.discover-details p {
  margin: 16px 0;
}

.discover-meta .save-work {
  margin-top: 18px;
}


/* FULL VIEWPORT-CENTRED IMAGE */

.discover-page[data-view="single"] .discover-image-link {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;

  width: calc(
    100vw
    - var(--page-gutter)
    - var(--page-gutter)
  );

  height: calc(
    100svh
    - var(--header-height)
    - 40px
  );

  transform: translateX(
    calc(
      0px
      - var(--discover-meta-width)
      - var(--discover-gap)
    )
  );
}

.discover-page[data-view="single"] .discover-image-link img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center center;
}
/* GRID VIEW */

.discover-page[data-view="grid"] .discover-stream {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 60px 24px;

}

.discover-page[data-view="grid"] .discover-work {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.discover-page[data-view="grid"] .discover-image-link {
  order: 1;

  display: block;
}

.discover-page[data-view="grid"] .discover-image-link img {
  width: 100%;
  max-width: none;
  max-height: none;
}

.discover-page[data-view="grid"] .discover-meta {
  order: 2;

  padding-top: 12px;
}

.discover-page[data-view="grid"] .discover-meta h2 {
  margin: 7px 0;
  font-size: 13px;
}

.discover-page[data-view="grid"] .discover-details,
.discover-page[data-view="grid"] .save-work {
  display: none;
}

.discover-page[data-view="grid"] .artist-link,
.discover-page[data-view="grid"] .year-link {
  font-size: 11px;
}


/* DISCOVER RESPONSIVE */

@media (max-width: 980px) {
  .discover-page[data-view="single"] .discover-work {
    --discover-meta-width: 190px;
    --discover-gap: 38px;
  }

  .discover-page[data-view="grid"] .discover-stream {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .discover-toolbar {
    position: static;
  }

  .discover-page[data-view="single"] .discover-work {
    min-height: 0;

    grid-template-columns: 1fr;
    gap: 28px;

    padding: 45px 0 65px;
  }

  .discover-page[data-view="single"] .discover-meta {
    order: 2;
  }

  .discover-page[data-view="single"] .discover-image-link {
    order: 1;

    width: 100%;
    height: auto;

    transform: none;
  }

  .discover-page[data-view="single"] .discover-image-link img {
    width: 100%;
    height: auto;
    max-height: none;
  }
}

@media (max-width: 500px) {
  .discover-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .discover-page[data-view="grid"] .discover-stream {
    grid-template-columns: 1fr;
  }
}

.following-empty {
  padding-top:
    calc(var(--header-height) + 120px);

  font-size: var(--font-meta);
}

.following-empty p {
  margin: 0 0 18px;
}

.following-empty a {
  color: var(--accent);
}

.following-page .discover-work[hidden],
.following-page .discover-stream[hidden],
.following-page .following-empty[hidden] {
  display: none !important;
}

@media (max-width: 1100px) and (min-width: 701px) {
  .discover-toolbar {
    padding-top: 40px;
  }
}
@media (max-width: 700px) {
  .discover-toolbar {
    padding-top: 32px;
  }
}