/* ===========================================================================
   The species entry — three layouts

   The register comes from the reference the project pointed at: a name set
   large, wide-tracked uppercase labels a fraction of that size, drawn things
   in the margins, and a great deal of air. The typefaces are the site's own —
   Archivo throughout, Noto Serif Gujarati for the name, which is the one
   thing on the page allowed to be big.

   Everything here is scoped to .entry so the pages already settled — home,
   ecology, nurseries — are untouched.
   =========================================================================== */

.entry {
  /* The site's faces, not new ones. */
  --serif:  var(--display), system-ui, sans-serif;
  --lead:   var(--text), system-ui, sans-serif;

  /* The body was too small. This is the fix, and it carries through the prose,
     the points and the values in the field grids. */
  --e-body: clamp(1.02rem, 0.98rem + 0.26vw, 1.15rem);
  --e-lead: clamp(1.10rem, 1.02rem + 0.42vw, 1.34rem);
  --e-sci:  clamp(1.18rem, 0.98rem + 0.85vw, 1.75rem);
  --e-huge: clamp(2.9rem, 1.10rem + 7.0vw, 6.6rem);

  /* The one tinted thing on an entry. Sage rather than grey: it belongs to
     the accent the site already carries, and it tells the growing panel
     apart from the page at a glance without becoming decoration. */
  --e-panel: #e9eee3;
  --e-panel-line: #cfd9c3;

  --e-flow: 62rem;
  --e-measure: 40rem;
  --e-label:   11rem;
}

/* --- the parts, shared by all three --------------------------------------- */

/* Small, wide, quiet. Everything that is not the plant's own name is set like
   this, which is what lets the name be as large as it is. */
.elabel {
  font-family: var(--text);
  font-size: clamp(.68rem, .64rem + .1vw, .76rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-muted);
  margin: 0;
  max-width: none;
}

/* A label with a hairline running out of it to the end of the column. */
.ehead { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.5rem; }
.ehead::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--rule); }

.entry .entry__gu {
  font-family: var(--indic), var(--serif);
  font-size: var(--e-huge);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 .35rem;
}
.entry h1:not(.entry__gu) {
  font-family: var(--serif);
  font-size: var(--e-huge);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 .35rem;
}

/* The italic against the roman, at a size that makes it a second voice rather
   than a caption. */
.entry .species-sci {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--e-sci);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1rem;
}
.entry .vernaculars { font-size: var(--e-body); color: var(--ink-muted); margin: 0 0 1.4rem; }
.entry .entry__status { margin: 0 0 1rem; }
.entry .entry__also {
  font-size: var(--e-body);
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 34rem;
  margin: 0 0 1.5rem;
}

/* The opening paragraph, set in the display serif. Not a word is added, cut or
   moved; it is the same sentence the sheet holds, at the size of something
   being said rather than filed. */
.entry__lead p {
  font-family: var(--text);
  font-size: var(--e-lead);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink);
  max-width: var(--e-flow);
  margin: 0 0 .7em;
  text-wrap: pretty;
}

.entry .prose { font-size: var(--e-body); line-height: 1.62; max-width: var(--e-measure); }
.entry .prose p { max-width: none; margin-bottom: 1em; }
.entry .points { max-width: var(--e-measure); }
.entry .points li { font-size: var(--e-body); line-height: 1.55; margin-bottom: .9rem; padding-left: 0; }
.entry .points li::before { content: none; }

/* --- the field grids ------------------------------------------------------ */
/* The values are statements, so they are set in the serif at reading size and
   the field name shrinks to a label above them. */
.entry .fields {
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.6vw, 2.4rem);
  margin: 0;
}
.entry .field { grid-template-columns: 2rem 1fr; gap: 0 .9rem; align-items: start; }
.entry .field__sym {
  width: 2rem; height: 2rem;
  transition: color .3s ease, transform .3s ease;
}
.entry .field__k {
  font-size: clamp(.64rem, .62rem + .08vw, .71rem);
  letter-spacing: .2em;
  color: var(--ink-faint);
  margin-bottom: .18rem;
}
.entry .field__v {
  font-size: var(--e-body);
  line-height: 1.35;
  color: var(--ink);
}
/* It answers when you point at it. */
.entry .field:hover .field__sym { color: var(--accent); transform: scale(1.1) rotate(-4deg); }

.entry .fields--growing {
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  background: var(--e-panel);
  border-top: 2px solid var(--e-panel-line);
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.3rem, 3vw, 2.4rem);
  margin-bottom: 1.2rem;
}
.entry .fields--growing .field__sym { color: var(--accent); }

/* --- the marks in the margin ----------------------------------------------
   Not decoration for its own sake: a plant in the corner of the growing
   panel, a bee where the entry says what feeds on it, a sunbird where it says
   where it grows. Worked in cross-stitch, set in the margin the 62rem column
   leaves either side, and taken away entirely on a narrow screen where there
   is no margin to put them in. Nothing is rotated — cross-stitch follows the
   weave of the cloth and a tilted one stops looking stitched. They never sit
   under text, and they are not announced to a screen reader. */

.entry .sect, .entry .hero2, .entry .fields--growing { position: relative; }
.entry .fields--growing .field { position: relative; z-index: 1; }

/* Three, not five, and spread down the page rather than crowded into it: one
   inside the growing panel, one on the left further down, one on the right at
   the foot. Any more and they stop being a surprise.

   The two beside prose are measured off the reading column rather than off the
   section, because the section is as wide as the page and the column is not:
   anchored to the section they creep under the first word as the window
   narrows. Anchored here they sit in the margin the column leaves, and take
   whatever width that margin can spare. */
.entry .stitch--plant   { width: 7.2rem; height: 7.2rem; right: -4rem; bottom: -1.8rem; }

.entry .stitch--bee,
.entry .stitch--sunbird {
  width: min(7.6rem, calc((100% - var(--e-flow)) / 2 - .6rem));
  height: auto;
}
.entry .stitch--bee     { top: -1.8rem; right: calc(50% + (var(--e-flow) / 2) + .3rem); }
.entry .stitch--sunbird { top: -1.4rem; left:  calc(50% + (var(--e-flow) / 2) + .3rem); }

/* Nothing floats where there is no room for it to float, and below about 60px
   the stitches run together and stop reading as thread — which is what the
   margin either side of a 62rem column comes down to at this width. */
@media (max-width: 76rem) { .entry .stitch--float { display: none; } }

.entry .disclaimer { max-width: var(--e-measure); font-size: var(--step--1); }
.entry .onward { max-width: var(--e-flow); margin-inline: auto; }
.entry .sources li { font-size: var(--e-body); }

/* ===========================================================================
   The layout

   Everything hangs off the middle: the name, the labels, the rules, the
   measure — with the masthead as the one exception, because a photograph
   beside its label is the one pairing that reads better off-centre.
   =========================================================================== */

.entry--centred { text-align: center; }
.entry--centred .ebox { width: min(100% - (var(--gutter) * 2), 80rem); margin-inline: auto; }

.entry--centred .elabel { text-align: center; margin-inline: auto; }
.entry--centred .ehead { justify-content: center; }
.entry--centred .ehead::before,
.entry--centred .ehead::after { content: ''; flex: 0 0 clamp(2rem, 8vw, 6rem); height: 1px; background: var(--rule); }

.entry--centred .entry__lead p { max-width: var(--e-flow); margin-inline: auto; text-align: left; }
.entry--centred .prose, .entry--centred .points, .entry--centred .sources, .entry--centred .disclaimer {
  max-width: var(--e-flow); margin-inline: auto; text-align: left;
}
.entry--centred .entry__also, .entry--centred .vernaculars { max-width: 40rem; margin-inline: auto; }
.entry--centred .entry__status { max-width: none; }
/* The facts should not be twice the width of the paragraph above them. */
.entry--centred .fields { max-width: var(--e-flow); margin-inline: auto; }
.entry--centred .sect { margin-bottom: clamp(2.8rem, 6vw, 4.5rem); }
.entry--centred .fields { text-align: left; }
.entry--centred .sources { text-align: center; }

/* The masthead keeps the earlier arrangement — photograph on the left, the
   names and what it is on the right — because that pairing is the one thing
   on the page that reads better off-centre: a portrait beside its label. The
   centre axis picks up immediately below it. */
.entry--centred .hero2 {
  max-width: var(--e-flow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  text-align: left;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}
.entry--centred .hero2 .hero__fig { margin: 0; }
.entry--centred .hero2 img,
.entry--centred .hero2 .gallery__slide img { aspect-ratio: 4 / 3; }
.entry--centred .hero2 .gallery__dots { justify-content: flex-start; }
.entry--centred .hero2 .entry__also,
.entry--centred .hero2 .vernaculars,
.entry--centred .hero2 .entry__status { margin-inline: 0; max-width: none; }
.entry--centred .hero2 .elabel { text-align: left; margin-inline: 0; }

@media (max-width: 52rem) {
  .entry--centred .hero2 { grid-template-columns: 1fr; }
}

/* The opening paragraph carries no label: it is the plant introducing itself,
   and a heading over it would only say so twice. */
/* The opening paragraph carries no heading and is not centred line by line:
   it runs the width of everything else on the page. */
.entry--centred .entry__lead--bare p { max-width: var(--e-flow); }

/* --- on a phone, the headings open and close -----------------------------
   The same control as the filters on the browse page: a checkbox and its
   label, no script, and the heading stays in the keyboard path. On a wide
   screen the checkbox does nothing and every section is simply there.   */

.fold__cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); }
.fold__mark { display: none; }

@media (max-width: 52rem) {
  .entry .fold__head { cursor: pointer; justify-content: flex-start; }
  .entry--centred .fold__head { text-align: left; }
  .entry--centred .fold__head::before { display: none; }
  .entry .fold__body { display: none; }
  .entry .fold__cb:checked ~ .fold__body { display: block; }

  /* Text, then the rule running out of it, then the sign — the sign belongs
     at the end of the row, and ::after is always the last child, so the two
     are put in order explicitly. */
  .entry--centred .fold__head::after { flex: 1 1 auto; order: 2; }
  .entry .fold__mark {
    display: inline-block;
    order: 3;
    width: 1.1em;
    margin-left: .4rem;
    text-align: center;
    color: var(--accent);
    font-size: 1.15em;
    line-height: 1;
  }
  .entry .fold__mark::before { content: '+'; }
  .entry .fold__cb:checked ~ .fold__head .fold__mark::before { content: '\2013'; }
  .entry .fold__cb:focus-visible ~ .fold__head { outline: 2px solid var(--accent); outline-offset: 4px; }
  .entry .fold { margin-bottom: 1.6rem; }
}
.entry--centred .gallery__dots { justify-content: center; }

/* The reveal already on the site, kept: each band lifts into place once. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entry .sect, .entry .ebox--tint { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
  }
}