/* Ethos — a small tree standing in the white space above the garden intro.
   Hovering names it; clicking opens the about panel over the page.

   The mark is positioned out of flow and centred in the gap that already sits
   between the definition and the intro, so it costs the hero no height. That
   matters: the torn edge has to stay above the fold on first load, and the
   hero was fitted to the viewport to get it there.

   Only index.html loads this file, so nothing already built can be disturbed
   by it. */

.garden-intro{position:relative}

.ethos-mark{position:absolute;left:50%;bottom:100%;
  /* half the gap up, then half its own height back down: dead centre in the
     white space, whatever height that space happens to be */
  transform:translate(-50%,50%);margin-bottom:calc(var(--blob-gap) / 2);
  display:flex;align-items:center;justify-content:center;
  width:clamp(22px,2.6vh,30px);height:clamp(22px,2.6vh,30px);
  padding:0;border:0;background:none;cursor:pointer;color:#3a5a34;
  transition:color .3s ease,transform .3s ease}
.ethos-mark:hover,.ethos-mark:focus-visible{color:#22301c;
  transform:translate(-50%,50%) scale(1.07)}
.ethos-mark:focus-visible{outline:2px solid #aed277;outline-offset:7px}
.ethos-tree{width:100%;height:100%;display:block}

/* Set beside the tree rather than under it: the gap it stands in is only
   40-60px tall, but there is always room to either side. */
.ethos-word{position:absolute;left:calc(100% + 11px);top:50%;
  transform:translateY(-50%) translateX(-4px);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:#4a6338;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.ethos-mark:hover .ethos-word,
.ethos-mark:focus-visible .ethos-word{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---- the panel ---- */

.ethos-scrim{position:fixed;inset:0;z-index:20;display:none;opacity:0;
  transition:opacity .4s ease;background:rgba(22,34,20,.42);backdrop-filter:blur(2px);
  overflow-y:auto;padding:clamp(24px,5vw,80px) clamp(18px,5vw,80px)}
.ethos-scrim-inner{display:flex;justify-content:center;min-height:100%}

.ethos-panel{display:none;width:min(720px,100%);align-self:flex-start;
  background:#faf9f4;color:#121210;
  padding:clamp(30px,3.6vw,58px) clamp(26px,3.6vw,64px) clamp(34px,4vw,68px);
  box-shadow:0 40px 80px rgba(20,32,18,.45);
  opacity:0;transform:translateY(16px);
  transition:opacity .38s ease,transform .38s cubic-bezier(.22,.9,.28,1)}
.ethos-panel--open{opacity:1;transform:none}

.ethos-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-bottom:1px solid #121210;padding-bottom:12px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#8b877c}
.ethos-close{cursor:pointer;color:#121210;background:none;border:0;font:inherit;
  letter-spacing:inherit;text-transform:inherit;padding:0}
.ethos-close:hover{color:#5f7d3c}

.ethos-title{margin:clamp(26px,3vw,46px) 0 0;font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;font-size:clamp(34px,4.4vw,64px);line-height:.96;letter-spacing:-.025em;
  max-width:18ch}
.ethos-lede{margin:clamp(18px,2vw,28px) 0 0;font-family:'Newsreader',serif;font-style:italic;
  font-size:clamp(17px,1.4vw,22px);line-height:1.42;color:#4c4a42;max-width:52ch}

/* The real ethos is still to be written; this says so plainly rather than
   letting stand-in wording pass for finished copy. */
.ethos-placeholder{display:inline-block;margin:clamp(22px,2.4vw,34px) 0 0;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:#8b877c;border:1px solid #ddd9cd;padding:7px 11px}

.ethos-body{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px);
  margin-top:clamp(18px,2vw,28px);max-width:62ch;font-size:clamp(16px,1.2vw,19px);
  line-height:1.55;font-weight:300;text-wrap:pretty}
.ethos-body p{margin:0}

.ethos-signoff{margin-top:clamp(30px,3.4vw,54px);border-top:1px solid #ddd9cd;padding-top:14px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8b877c}

@media (prefers-reduced-motion:reduce){
  .ethos-mark,.ethos-word,.ethos-panel,.ethos-scrim{transition:none}
  .ethos-panel{transform:none}
}