:root {
  --helix-navy: #2b3a63;
  --helix-teal: #52bbb5;
  --helix-pink: #d0006f;
  --helix-yellow: #fbb33d;
  --helix-dark-red: #9b2242;
  --helix-gray: #bbbcbc;
  --surface: #ffffff;
  --surface-alt: #f5f5f5;
  /* matches the grey section background used across helixcentre.com */
  --surface-grey: #ececec;
  --row-divider: #e6e6e6;
  --surface-soft: #fafafa;
  --border: #dddddd;
  --border-strong: #b9b9b9;
  --text-primary: var(--helix-navy);
  --text-secondary: #555555;
  --radius: 0px;
  --card-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
  --max-width: 1120px;
}

@font-face {
  font-family: "Circular";
  src: url("fonts/CircularStd-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Circular";
  src: url("fonts/CircularStd-BookItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Circular";
  src: url("fonts/CircularStd-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Circular";
  src: url("fonts/CircularStd-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  background: transparent;
  -webkit-text-size-adjust: 100%;
}

/* When embedded, the parent page resizes the iframe to fit the content, so this
   document should never scroll itself or show a scrollbar track. Standalone
   (opened directly) it must still scroll normally. */
html.is-embedded {
  overflow: hidden;
  scrollbar-width: none;
}

html.is-embedded::-webkit-scrollbar,
html.is-embedded body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: "Circular", Arial, sans-serif;
}

a {
  color: var(--helix-pink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--helix-navy);
}

button,
input {
  font: inherit;
}

.app-shell {
  width: 100%;
  min-width: 0;
  background: var(--surface);
}

.top-bar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.brand-block {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: auto;
  height: 54px;
  flex: 0 0 auto;
}

.brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brand-kicker,
.eyebrow,
.filter-bar__label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.brand-kicker,
.eyebrow {
  color: var(--helix-pink);
}

.brand-title {
  color: var(--helix-navy);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
}

.brand-subtitle {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.brand-sub-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
}

.page-content {
  width: 100%;
  margin: 0;
  padding: 2px 0 34px;
}

body.table-embed,
.table-embed .app-shell {
  background: transparent;
}

.table-embed .page-content {
  max-width: none;
  padding: 0;
}

.hero-card {
  max-width: 720px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.hero-card h1 {
  margin: 0;
  color: var(--helix-navy);
  font-size: 2rem;
  line-height: 1.15;
}

.hero-card .eyebrow {
  margin: 0 0 8px;
}

.hero-text {
  max-width: 72ch;
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
}

.instructions-block {
  max-width: 88ch;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--helix-teal);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.instructions-block h2,
.table-card__header h1,
.table-card__header h2 {
  margin: 0;
  color: var(--helix-navy);
  font-size: 1.12rem;
  line-height: 1.3;
}

.instructions-list {
  margin: 12px 0 0;
  padding-left: 1.25rem;
  color: var(--text-primary);
}

.instructions-list li {
  margin-bottom: 10px;
  line-height: 1.65;
}

.instructions-list li:last-child {
  margin-bottom: 0;
}

.instruction-link,
.property-link {
  color: var(--helix-pink);
  font-weight: 700;
}

.instructions-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.table-embed .table-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table-card__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.muted-text {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.table-actions {
  flex: 0 1 380px;
  min-width: 220px;
  margin-left: auto;
}

/* Long placeholders should trail off cleanly rather than clip mid-word. */
.m3-input::placeholder {
  text-overflow: ellipsis;
}

.m3-input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
}

.m3-input:focus {
  outline: 3px solid rgba(82, 187, 181, 0.28);
  border-color: var(--helix-teal);
}

.table-wrap {
  overflow-x: auto;
  scrollbar-width: none;
}

.table-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.m3-table {
  width: 100%;
  border-collapse: collapse;
}

.m3-table thead {
  background: var(--surface-grey);
}

.m3-table th,
.m3-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
}

.m3-table th {
  border-bottom: 1px solid var(--border);
}

/* faint divider between submissions */
.m3-table td {
  border-bottom: 1px solid var(--row-divider);
}

.m3-table tbody tr:last-child td {
  border-bottom: 0;
}

.m3-table th {
  color: var(--helix-navy);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.m3-table td {
  color: var(--text-primary);
  line-height: 1.45;
}

/* Theme and project filters. The brand uses magenta for links, so these read
   as links rather than buttons — lighter in a dense table than filled blocks. */
.filter-pill {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--helix-pink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.filter-pill:hover,
.filter-pill:focus {
  color: var(--helix-navy);
}

.filter-pill:focus-visible {
  outline: 2px solid rgba(43, 58, 99, 0.45);
  outline-offset: 2px;
}

/* Thumbnail column. Fixed width so the titles line up down the table whether
   or not a given entry has an image. */
.cell-thumb {
  width: 92px;
  padding-right: 0;
}

.thumb {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: var(--surface-alt);
}

/* No image: an empty square rather than nothing, so rows stay aligned. */
.thumb--empty {
  background: var(--surface-alt);
}

.cell-title {
  display: block;
}

/* Author lists can be long. Show at most two lines and let the browser add
   an ellipsis, so a paper with thirty authors doesn't dominate the row. */
.cell-authors {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.4;
}

.table-row-link {
  cursor: pointer;
}

.table-row-link:hover td,
.table-row-link:focus td {
  background: rgba(82, 187, 181, 0.12);
}

.table-row-link:focus {
  outline: 3px solid rgba(82, 187, 181, 0.35);
  outline-offset: -3px;
}

.loading-cell {
  color: var(--text-secondary);
}

.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}

.filter-bar__label:not(:first-child) {
  margin-left: 8px;
}

.filter-bar[hidden] {
  display: none;
}

.filter-bar__label {
  color: var(--text-secondary);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 6px 5px 10px;
  border-radius: var(--radius);
  background: var(--helix-navy);
  color: var(--surface);
  font-size: 0.88rem;
  font-weight: 700;
}

/* Active-filter chips echo the pill colours they came from. */
.filter-chip--theme {
  background: #b3e8e4;
  color: var(--helix-navy);
}

.filter-chip--project {
  background: #ffe8b3;
  color: var(--helix-navy);
}

.filter-chip--theme .filter-chip__remove,
.filter-chip--project .filter-chip__remove {
  background: rgba(43, 58, 99, 0.14);
  color: var(--helix-navy);
}

.filter-chip--theme .filter-chip__remove:hover,
.filter-chip--project .filter-chip__remove:hover {
  background: rgba(43, 58, 99, 0.24);
}

.filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--surface);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.filter-chip__remove:hover,
.filter-chip__remove:focus {
  background: rgba(255, 255, 255, 0.34);
}

.m3-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--helix-navy);
  font-weight: 700;
  text-decoration: none;
}

.m3-button:hover,
.m3-button:focus {
  border-color: var(--helix-teal);
  background: rgba(82, 187, 181, 0.12);
  color: var(--helix-navy);
}

.back-link-row {
  margin-bottom: 14px;
}

.keyword-nav-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* A fixed-ratio banner running the full width of the embed. Every entry gets
   the same shaped image regardless of what was uploaded, so the pages sit
   consistently next to each other. The form asks for landscape photographs,
   not diagrams, because this area crops. */
.entry-hero-image-wrap {
  width: 100%;
  aspect-ratio: 5 / 2;
  margin: 0 0 28px;
  background: var(--surface);
  overflow: hidden;
}

/* object-fit: cover fills the banner and trims whatever doesn't fit, taking
   it evenly from both edges so the middle of the photo is always kept. */
.entry-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Photos are optional. With no photo the wrapper is removed entirely (rather
   than collapsing to an empty grey band) and the article gets its own top
   spacing, so the title doesn't sit flush against the top of the iframe. */
.empty-image .entry-hero-image-wrap {
  display: none;
}

.empty-image .entry-article {
  padding-top: 26px;
}

.entry-article {
  width: 100%;
  max-width: 720px;
  margin: 0;
}

.entry-article h1 {
  margin: 0 0 14px;
  color: var(--helix-navy);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.3;
}

.entry-article h2 {
  margin: 0 0 12px;
  color: var(--helix-navy);
  font-size: 1.4rem;
  line-height: 1.25;
}

.entry-authors {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.entry-authors[hidden] {
  display: none;
}

.entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

a.filter-pill {
  text-decoration: none;
}

a.filter-pill:hover,
a.filter-pill:focus {
  color: var(--helix-navy);
}

.entry-meta__text {
  color: var(--text-secondary);
}

/* Separates every part of the meta line. Kept lighter than the text either
   side of it so it reads as punctuation rather than as another field. */
.entry-meta__separator {
  color: var(--helix-gray);
}

.entry-keywords {
  margin: 0 0 22px;
}

.entry-keywords[hidden] {
  display: none;
}

.keyword-chip {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 6px 9px;
  border-radius: var(--radius);
  background: rgba(82, 187, 181, 0.16);
  color: var(--helix-navy);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.keyword-chip:hover,
.keyword-chip:focus {
  background: rgba(82, 187, 181, 0.26);
  color: var(--helix-navy);
}

.entry-lede {
  margin: 0 0 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
  color: var(--helix-navy);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
}

.entry-summary {
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* An optional diagram under the summary. It is shown whole, never cropped —
   a diagram cut in half is worse than no diagram — so it scales down to fit
   the column and is capped in height so a tall one can't dominate the page. */
.entry-diagram {
  margin: 26px 0 8px;
}

/* No fixed width: a small diagram is shown at its own size rather than being
   stretched up to the column width, which would blur it. Both maximums are
   respected together, so the aspect ratio is always kept. */
.entry-diagram-image {
  display: block;
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  background: var(--surface);
}

.entry-diagram-caption {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.5;
}

.entry-gallery {
  display: grid;
  gap: 12px;
  margin: 28px 0;
}

.entry-gallery[hidden] {
  display: none;
}

.entry-gallery img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
}

.entry-details {
  margin: 32px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.entry-details[hidden] {
  display: none;
}

.entry-details dt {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 700;
}

.entry-details dt:first-child {
  margin-top: 0;
}

.entry-details dd {
  margin: 4px 0 0;
  color: var(--text-primary);
  line-height: 1.5;
  word-break: break-word;
}

.back-to-all {
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.entry-details:not([hidden]) + .back-to-all {
  margin-top: 26px;
  padding-top: 0;
  border-top: 0;
}

.back-to-all-link {
  color: var(--helix-pink);
  font-weight: 700;
  text-decoration: none;
}

.back-to-all-link:hover,
.back-to-all-link:focus {
  color: var(--helix-pink);
  text-decoration: underline;
}

.pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

.pager[hidden] {
  display: none;
}

.pager__status {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.pager__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.pager__button {
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--helix-navy);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.pager__button:hover:not(:disabled) {
  border-color: var(--helix-navy);
}

.pager__button:disabled {
  color: var(--helix-gray);
  cursor: default;
}

.pager__button--current {
  background: var(--helix-navy);
  border-color: var(--helix-navy);
  color: var(--surface);
}

.pager__button:focus-visible {
  outline: 2px solid rgba(43, 58, 99, 0.45);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .hero-card h1 {
    font-size: 1.65rem;
  }

  .entry-article h1 {
    font-size: 1.6rem;
  }
}

@media (max-width: 720px) {
  .top-bar {
    padding: 15px 14px 12px;
  }

  .brand-block {
    align-items: flex-start;
    gap: 11px;
  }

  .brand-logo {
    height: 44px;
  }

  .brand-title {
    font-size: 1.28rem;
  }

  .brand-subtitle {
    font-size: 0.94rem;
  }

  .brand-sub-subtitle {
    font-size: 0.84rem;
  }

  .page-content {
    padding: 2px 0 26px;
  }

  .hero-card {
    margin-bottom: 16px;
  }

  .instructions-block {
    padding: 14px;
  }

  .table-card__header {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .table-actions {
    flex-basis: auto;
  }

  .m3-table,
  .m3-table tbody,
  .m3-table tr,
  .m3-table td {
    display: block;
    width: 100%;
  }

  .m3-table thead {
    display: none;
  }

  .m3-table tr {
    border-bottom: 1px solid var(--border);
  }

  .m3-table tr:last-child {
    border-bottom: 0;
  }

  .m3-table td {
    display: grid;
    grid-template-columns: minmax(96px, 32%) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 16px;
    border-bottom: 0;
  }

  .m3-table td::before {
    content: attr(data-label);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
  }

  /* Each row reads as a small card: the title leads, full width and without a
     label, then the remaining fields as label/value pairs beneath it. */
  .m3-table tr {
    padding: 6px 0 12px;
  }

  /* In the stacked card layout the thumbnail sits above the title, with no
     "Image" label — the picture doesn't need announcing. */
  .m3-table td.cell-thumb {
    display: block;
    width: auto;
    padding: 12px 16px 0;
  }

  .m3-table td.cell-thumb::before {
    content: "";
    display: none;
  }

  .m3-table td[data-label="Title"] {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .m3-table td[data-label="Title"]::before {
    content: "";
    display: none;
  }

  .m3-table td[data-label="Title"] .cell-title {
    color: var(--helix-navy);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .m3-table td[data-label="Title"] .cell-authors {
    margin-top: 6px;
  }

  .m3-table .loading-cell {
    display: block;
    padding: 14px;
  }

  .m3-table .loading-cell::before {
    content: "";
  }

  .filter-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 14px;
  }

  /* A 5:2 banner would be a thin strip on a phone, so the crop gets taller. */
  .entry-hero-image-wrap {
    aspect-ratio: 16 / 9;
    margin-bottom: 20px;
  }

  .entry-diagram-image {
    max-height: 360px;
  }


  .entry-article {
    padding: 0 16px;
  }

  .empty-image .entry-article {
    padding-top: 20px;
  }

  .entry-article h1 {
    font-size: 1.4rem;
    letter-spacing: 0.5px;
  }

  .entry-lede {
    margin-bottom: 22px;
    padding-bottom: 22px;
    font-size: 1.02rem;
  }

  .entry-summary {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .keyword-chip {
    font-size: 0.85rem;
  }

  .table-card__header {
    padding: 14px 16px;
  }

  .pager {
    justify-content: center;
    padding: 14px 16px;
  }

  .pager__status {
    width: 100%;
    text-align: center;
  }
}