/* About, sheet A-200. Prefix ab-.
   Cover: the logo house drawn large on the sheet's ground line, the name standing on the same line to the right
   like a drawing title. Then the story of the name beside the real planter, then the practice. */

.ab { position: relative; }

/* ------------------------------------------------------------------ cover */
.ab-cover {
  position: relative; height: 100vh; height: 100svh; min-height: 620px;
  --gy: 62%;                                                        /* the ground line */
  --lw: min(1180px, calc((6 * var(--col) + 5 * var(--gap)) / .9253));  /* logo ground spans columns 2 to 7 */
}
.ab-code { position: absolute; left: var(--m); top: calc(var(--hd) + 24px); margin: 0; color: var(--soft); min-height: 1.5em; }

.ab-gl {
  position: absolute; left: 0; right: 0; top: var(--gy); height: 1px; margin-top: -.5px;
  background: var(--ink); transform-origin: 0 50%;
}

/* The logo is placed by its own ground line: its ground starts on column 2 and sits on --gy. */
.ab-logo {
  position: absolute; margin: 0; width: var(--lw); color: var(--ink);
  left: calc(var(--m) + var(--col) + var(--gap) - .03735 * var(--lw));
  top: calc(var(--gy) - .33392 * var(--lw));
}
.ab-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.ab-logo .lp { fill: transparent; }                                  /* the square is the planter */
.ab-logo .lm { fill: var(--cream); opacity: 0; transition: opacity .25s ease .2s; }
.ab-logo .leaf {
  fill: var(--ink); stroke: var(--cream);
  transform-box: fill-box; transform: scale(0) rotate(0deg);
  transition: transform .38s cubic-bezier(.5, 0, .75, 0);
}
.ab-logo .leaf:nth-child(1) { transform-origin: 94% 100%; transform: scale(0) rotate(16deg); }
.ab-logo .leaf:nth-child(2) { transform-origin: 6% 100%; transform: scale(0) rotate(-16deg); }
.ab-logo .leaf:nth-child(3) { transform-origin: 26% 100%; }
.ab-logo.is-sprout .lm { opacity: 1; transition-delay: .3s; transition-duration: .5s; }
.ab-logo.is-sprout .leaf { transform: scale(1) rotate(0deg); transition: transform .95s cubic-bezier(.2, 1.2, .35, 1); }
.ab-logo.is-sprout .leaf:nth-child(1) { transition-delay: .12s; }
.ab-logo.is-sprout .leaf:nth-child(2) { transition-delay: .22s; }
.ab-logo.is-sprout .leaf:nth-child(3) { transition-delay: .02s; }

/* The name stands on the ground line, right of the house, like the title of a drawing; a note under the line. */
.ab-title { position: absolute; inset: 0; pointer-events: none; }
.ab-name {
  position: absolute; margin: 0; left: calc(var(--m) + 8 * (var(--col) + var(--gap)));
  bottom: calc(100% - var(--gy) + 20px);
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; white-space: nowrap;
  font-size: calc((4 * var(--col) + 3 * var(--gap)) / 21); letter-spacing: .24em; line-height: 1;
  min-height: 1em;
}
.ab-sub { position: absolute; margin: 0; left: calc(var(--m) + 8 * (var(--col) + var(--gap))); top: calc(var(--gy) + 18px); color: var(--soft); white-space: nowrap; }
.ab-cue { position: absolute; right: var(--m); bottom: 40px; margin: 0; transition: opacity .6s var(--ease-soft); }
.ab-cue.is-gone, .ab.is-pre .ab-cue { opacity: 0; }

/* ------------------------------------------------------------------ the name: the real planter */
.ab-story {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(64px, 9vh, 140px) var(--m) 0;
}
.ab-p1 {
  grid-column: 7 / span 5; grid-row: 1; margin: 0;
  font-size: clamp(21px, 1.72vw, 36px); line-height: 1.34; letter-spacing: -.006em; text-wrap: pretty;
}
.ab-fig { grid-column: 3 / -1; margin-right: calc(-1 * var(--m)); grid-row: 2; position: relative; container-type: inline-size; margin-top: clamp(64px, 9vh, 120px); }

/* The frame holds the house twice, in the same box: its front elevation in line, and the render over it. */
.ab-frame { position: relative; width: 100%; }
.ab-elev { position: absolute; inset: 0; color: var(--ink); transition: opacity .7s var(--ease-soft); }
.ab-elev.is-pre { opacity: 0; transition: none; }
.ab-elev.is-under { opacity: 0; transition: opacity .6s ease .2s; }
.ab-elev svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ab-elev .w1 { stroke-width: calc(var(--k, 1) * 1.4); }
.ab-elev .w2 { stroke-width: calc(var(--k, 1) * .8); }
.ab-elev .w3 { stroke-width: calc(var(--k, 1) * .55); opacity: .75; }
.ab-elev .ef { fill: var(--cream); }
.ab-plate { position: relative; z-index: 1; margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
.ab-plate img { width: 100%; height: 100%; object-fit: cover; }
/* The parallel rule at the edge of the render as it rises or clears. */
.ab-sweep { position: absolute; z-index: 2; left: -24px; right: 0; top: 0; height: 1px; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.ab-sweep.is-on { opacity: 1; transition-duration: .1s; }

/* Leader from the margin to the planter's height at the image edge. */
.ab-ld { right: calc(100% + 12px); transform: translateY(-50%); margin: 0; --len: clamp(24px, 3.4vw, 96px); opacity: 0; transition: opacity .35s ease; }
.ab-ld::before { transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease-out); }
.ab.is-landed .ab-ld { opacity: 1; transition: opacity .6s ease .45s; }
.ab.is-landed .ab-ld::before { transform: scaleX(1); transition: transform .9s var(--ease-out) .35s; }
.ab-cap { margin: 16px 0 0; display: flex; gap: 24px; min-height: 1.5em; }
.ab-cap b { font-weight: 400; color: var(--ink); }

/* ------------------------------------------------------------------ the practice */
.ab-practice {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(120px, 20vh, 260px) var(--m) 0;
}
.ab-p2 {
  grid-column: 2 / span 8; margin: 0;
  font-size: clamp(22px, 2.05vw, 42px); line-height: 1.3; letter-spacing: -.008em; text-wrap: pretty;
}
.ab-notes {
  grid-column: 2 / span 6; margin: var(--s6) 0 0; min-height: 6em;
  font-family: var(--f-mono); font-size: 12.5px; line-height: 2; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.ab-notes > span { display: block; }
.ab-notes i { font-style: normal; white-space: nowrap; }
.ab-on { grid-column: 9 / span 4; align-self: end; margin: var(--s6) 0 0; font-size: clamp(17px, 1.1vw, 21px); color: var(--soft); }
.ab-on a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: var(--line); transition: text-decoration-color .4s ease; }
.ab-on a:hover, .ab-on a:focus-visible { text-decoration-color: var(--ink); }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1100px) {
  .ab-p1 { grid-column: 6 / span 7; }
  .ab-fig { grid-column: 2 / -1; }
  .ab-p2 { grid-column: 1 / span 10; }
  .ab-notes { grid-column: 1 / span 8; }
  .ab-on { grid-column: 1 / span 8; }
  .ab-ld { display: none; }
}

/* Below 900px there is no room for the name beside the house: it goes above the house, so nothing passes
   under the square's path when it leaves the logo. */
@media (max-width: 900px) {
  .ab-cover { --gy: 60%; --lw: calc((100vw - 2 * var(--m)) * .8 / .9253); min-height: 560px; }
  .ab-logo { left: calc(var(--m) - .03735 * var(--lw)); }
  .ab-name { left: var(--m); bottom: calc(100% - var(--gy) + .37566 * var(--lw) + 64px); font-size: 20px; letter-spacing: .22em; }
  .ab-sub { left: var(--m); right: var(--m); top: auto; white-space: normal; bottom: calc(100% - var(--gy) + .37566 * var(--lw) + 34px); }
}

@media (max-width: 700px) {
  .ab-cover { --gy: 64%; --lw: calc((100vw - 2 * var(--m)) / .9253); }
  .ab-name { bottom: calc(100% - var(--gy) + .37566 * var(--lw) + 56px); font-size: 15px; letter-spacing: .2em; }
  .ab-sub { bottom: calc(100% - var(--gy) + .37566 * var(--lw) + 28px); font-size: 11px; }
  .ab-cue { bottom: 28px; }
  .ab-cover .marks i:nth-child(1), .ab-cover .marks i:nth-child(2) { top: calc(var(--hd) + 4px); }

  .ab-story { display: flex; flex-direction: column; padding-top: 48px; }
  .ab-fig { order: 1; margin: 0 calc(-1 * var(--m)); }
  .ab-cap { padding-left: var(--m); }
  .ab-sweep { left: 0; }
  .ab-p1 { order: 2; margin-top: var(--s5); font-size: 21px; }
  .ab-ld { display: none; }
  .ab-cap { gap: 16px; }

  .ab-practice { display: block; padding-top: 96px; }
  .ab-p2 { font-size: 22px; }
  /* Each note stays on one line at phone width: a wrapped line would end on a middle dot. */
  .ab-notes { font-size: 10.5px; letter-spacing: .02em; margin-top: var(--s5); }
  .ab-on { margin-top: var(--s5); }
}