/* Site home hero (option D7 "Harbour split", chosen by the user 2026-11-10).
   Title and subtitle at the far left, the search on the right on the same axis; the Figma DNA picture under a navy
   tone close to the Figma look (tone chosen by a Fable panel, 3 of 3). No wheel and no caption (user, 2026-11-10).
   The search is not open yet: a semi-transparent mask with the words "Search coming soon" lies over the search bar,
   which keeps its own design, and the form is inert (user, 2026-11-10); to open it, follow the note at the mask rules.
   2026-11-11 (user + Fable panel): the hero grows with the screen (height about 42% of the viewport on desktops, H1 up
   to 50px), the picture sits under a darker navy tone, and on tablets and phones the title is larger and the search
   smaller, so the title always leads.
   2026-11-13 (user; weight 650 chosen by a Fable panel, 3 of 3): title in IBM Plex Sans 650 at 42-58px, subtitle at
   17-21px on one line from 1280px up (max-width 46em = 780px at 17px); tablets and phones keep their own sizes.
   2026-11-13 (user; band colour, tagline treatment and proportions chosen by Fable panels): the desktop hero is about
   70% of its earlier height, and under it an intro band carries one bold centred tagline (rules after the hero's). */

body.shell-page.site-home .page-content { max-width: none; padding: 0; }

/* A. Harbour Split: title and search share one axis; a navy pier under the title, a pool of shade under the search,
   and the lit helix open in between */
.home-hero {
  --gutter: 24px;
  --deep: 8 24 37;
  --teal: #39c5bb;
  --ink: #ffffff;
  --ink-soft: #dce8ee;
  --link: #8fe3dc;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: clamp(210px, 29vh, 406px);   /* about 70% of the earlier clamp(300px, 42vh, 580px) */
  margin: 0;
  color: var(--ink);
  font-family: var(--cutd-font-body, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  background: #0b1f2e url("/ui/home-hero.jpg") 50% 22% / cover no-repeat;
}
.home-hero *, .home-hero *::before, .home-hero *::after { box-sizing: border-box; }

.home-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgb(var(--deep) / .36), rgb(var(--deep) / .36)),
    radial-gradient(30% 80% at 100% 100%, rgb(var(--deep) / .7) 0%, rgb(var(--deep) / 0) 100%),
    linear-gradient(0deg, rgb(var(--deep) / .6) 0%, rgb(var(--deep) / 0) 34%),
    linear-gradient(90deg, rgb(var(--deep) / .84) 0%, rgb(var(--deep) / .78) 36%, rgb(var(--deep) / .54) 56%, rgb(var(--deep) / 0) 70%);
}

.home-hero__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(400px, 28vw, 640px);
  grid-template-areas: "title search" "sub examples";
  column-gap: clamp(40px, 6vw, 120px);
  row-gap: clamp(14px, .8vw, 22px);
  align-items: center;
  padding: 28px var(--gutter) 40px;
}
/* the right pier: a pool of deep navy that follows the search column at every width */
.home-hero__inner::before {
  content: "";
  grid-column: 2; grid-row: 1 / span 2; align-self: stretch;
  z-index: -1;
  margin: -70px -120px -80px;
  background: radial-gradient(closest-side, rgb(var(--deep) / .9) 0%, rgb(var(--deep) / .82) 56%, rgb(var(--deep) / 0) 100%);
  pointer-events: none;
}

.home-hero h1 {
  grid-area: title;
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: clamp(42px, 3vw, 58px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--ink);
  text-shadow: 0 1px 2px rgb(3 14 24 / .5);
}
.home-hero__sub {
  grid-area: sub;
  text-wrap: balance;
  align-self: start;
  max-width: 46em;   /* 780px at 17px; grows with the text, so the subtitle stays on one line up to 21px */
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: clamp(17px, 1.1vw, 21px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  text-shadow: 0 1px 2px rgb(3 14 24 / .5);
}

/* search: one joined bar, like the Classical search, sitting straight on the right pier */
/* search is not open yet (user, 2026-11-10): a semi-transparent mask lies over the search bar, which keeps its own
   design (field and Search button); the words "Search coming soon" sit on the mask where the placeholder would be, so the
   placeholder itself is hidden while the search is closed. The form is inert (no pointer, no keyboard). To open the
   search, delete the mask paragraph and the form's inert attribute in home-main.html, and the two rules below. */
.home-search-wrap { grid-area: search; position: relative; }
.home-hero .home-search { display: flex; margin: 0; }
.home-search-mask {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center;
  margin: 0;
  padding: 0 14px;
  background: rgb(var(--deep) / .62);
  border-radius: 2px;
  font: 500 clamp(15px, calc(.25vw + 12px), 17px)/1.2 var(--cutd-font-body, "IBM Plex Sans", sans-serif);
  color: #ffffff;
}
.home-hero .home-search-wrap .home-search input[type="search"]::placeholder { color: transparent; }
.home-hero .home-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(46px, calc(.8vw + 36px), 54px);
  padding: 0 14px;
  font: clamp(15px, calc(.25vw + 12px), 17px)/1.2 var(--cutd-font-body, "IBM Plex Sans", sans-serif);
  color: #16364d;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  -webkit-appearance: none;
  appearance: none;
}
.home-hero .home-search input[type="search"]::placeholder { color: #5c6a73; opacity: 1; }
.home-hero .home-search input[type="search"]:focus,
.home-hero .home-search input[type="search"]:focus-visible { outline: none; }   /* no highlight ring while typing (user, 2026-11-09) */
.home-hero .home-search button {
  flex: 0 0 auto;
  height: clamp(46px, calc(.8vw + 36px), 54px);
  padding: 0 24px;
  font: 600 clamp(15px, calc(.2vw + 12px), 16px)/1 var(--cutd-font-body, "IBM Plex Sans", sans-serif);
  color: #0b1f2e;
  background: var(--teal);
  border: 0;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
}
.home-hero .home-search button:hover { background: #5fd3cb; }
.home-hero .home-search button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.home-hero__examples {
  grid-area: examples;
  align-self: start;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  margin: 0;
  font-size: clamp(14px, calc(.2vw + 11px), 15px);
  line-height: 1.45;
  color: var(--ink-soft);
}
.home-hero__examples a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgb(143 227 220 / .5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.home-hero__examples a:hover { color: #ffffff; text-decoration-color: #ffffff; }
.home-hero__examples a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }

/* Intro band under the hero (user, 2026-11-13): one bold centred tagline, about half the hero's height. Its colours
   are the reverse of the hero's (pale teal band #d9efed, softened petrol text #2f5562, 6.7:1), so the tagline reads as
   a second layer below the white hero title, as on AlphaFold DB and RCSB PDB. Band K4 (user); text lighter than the
   first #0b2b38 at the user's request, shade chosen by a Fable panel (mean 8.7); padding trimmed (user).
   The top line runs longer than the second: no balancing, and the phrases in .nw (desktop) and .keep (all widths)
   never break. Phones show "CUTD" without the full name (.intro-full). */
/* white space of about two screens under the band, kept for later modules, so the footer stays out of the first screen
   (user, 2026-11-13); svh keeps it steady while a phone's address bar shows or hides */
.home-intro { margin-bottom: 200vh; margin-bottom: 200svh; background: #d9efed; color: #2f5562; }
.home-intro__statement {
  box-sizing: border-box;
  max-width: calc(48em + 48px);
  margin: 0 auto;
  padding: clamp(18px, 1.6vw, 30px) 24px;
  text-align: center;
  text-wrap: pretty;
  font: 700 clamp(22px, calc(1.25vw + 8px), 38px)/1.4 "IBM Plex Sans", sans-serif;   /* 26px at 1440, 32 at 1920, 38 at 2400+ */
  letter-spacing: -0.012em;
}
.home-intro__statement .nw, .home-intro__statement .keep { white-space: nowrap; }
/* the INSDC link carries no link styling; it is underlined only on hover or keyboard focus (user, 2026-11-13) */
.home-intro__statement a { color: inherit; text-decoration: none; }
.home-intro__statement a:hover, .home-intro__statement a:focus-visible {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; outline: none;
}


/* below 1600 px the picture keeps at least its 1366 px scale, so the frame stays on the helix and above the
   picture's fake codon tiles (CAG, ATG) instead of sliding down onto them */
@media (max-width: 1599px) {
  .home-hero { background-size: max(100%, 1366px) auto; background-position: 50% 13%; }
}

/* narrower desktops and tablets: one column, the search under the copy; the title leads and the search is narrower */
@media (max-width: 1099px) {
  .home-hero { min-height: 300px; }
  .home-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "sub" "search" "examples";
    row-gap: 0;
    padding: 44px var(--gutter) 48px;
  }
  .home-hero__inner::before { display: none; }
  .home-hero h1 { font-size: clamp(30px, calc(2.4vw + 12px), 32px); line-height: 1.15; }
  .home-hero__sub { margin-top: 10px; max-width: 60ch; font-size: 16px; }
  .home-search-wrap { margin-top: 28px; max-width: 460px; }
  .home-hero .home-search input[type="search"], .home-hero .home-search button { height: 44px; }
  .home-hero .home-search input[type="search"], .home-search-mask { font-size: 16px; }
  .home-hero .home-search button { font-size: 15px; }
  .home-hero__examples { margin-top: 14px; }
  .home-intro__statement { font-size: 21px; }
  .home-intro__statement .nw { white-space: normal; }
  .home-hero::before {
    background:
      linear-gradient(rgb(var(--deep) / .3), rgb(var(--deep) / .3)),
      linear-gradient(90deg, rgb(var(--deep) / .9) 0%, rgb(var(--deep) / .82) 55%, rgb(var(--deep) / .5) 100%),
      linear-gradient(180deg, rgb(var(--deep) / .2) 0%, rgb(var(--deep) / 0) 40%, rgb(var(--deep) / .5) 100%);
  }
}

/* phones */
@media (max-width: 599px) {
  .home-hero { --gutter: 16px; min-height: 0; background-size: cover; background-position: 56% 40%; }
  .home-hero::before { background: linear-gradient(180deg, rgb(var(--deep) / .74) 0%, rgb(var(--deep) / .8) 40%, rgb(var(--deep) / .86) 100%); }
  .home-hero__inner { padding: 32px var(--gutter) 36px; }
  .home-hero h1 { font-size: clamp(28px, 8vw, 32px); line-height: 1.14; text-wrap: balance; }
  .home-hero__sub { margin-top: 12px; font-size: 15.5px; }
  .home-search-wrap { margin-top: 24px; }
  .home-hero .home-search input[type="search"], .home-hero .home-search button { height: 42px; }
  .home-hero .home-search input[type="search"], .home-search-mask { font-size: 15px; }
  .home-hero .home-search button { padding: 0 14px; font-size: 14px; }
  .home-hero__examples { margin-top: 14px; gap: 6px 14px; font-size: 13.5px; }
  .home-intro__statement { padding: 18px 16px; font-size: clamp(15.5px, 4.3vw, 16px); }
  .home-intro__statement .intro-full { display: none; }
}