/* the engraved illustrations in the lower sections */

/* ---------- lower1: engraved plates laid under the blueprint and the aqueduct of computers ---------- */
.l1-host { position: relative; }
.l1-under { position: absolute; left: 0; top: 0; display: block; max-width: none; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; }
.l1-under.l1-on { opacity: 1; }
.l1-over { position: relative; z-index: 1; }

/* small labels in the two drawings: sentence case, Hanken Grotesk, no wide tracking */
.section-draw .sec-cap { font: 600 12px "Hanken Grotesk", sans-serif; letter-spacing: 0.01em; text-transform: none; }
.shard .sh-range { font: 600 12.5px "Hanken Grotesk", sans-serif; letter-spacing: 0.01em; text-transform: none; }
.shard .sh-end { font: 600 13.5px "Hanken Grotesk", sans-serif; letter-spacing: 0.01em; text-transform: none; }

/* the blueprint, once engraved: the old line drawing gives way; labels, leaders and hit areas stay on top */
.section-draw .sec-ln { transition: opacity 0.6s ease, visibility 0s linear 0s; }
.section-draw.l1-eng .sec-ln { opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.section-draw.l1-eng .sec-users .sec-ln { opacity: 1; visibility: visible; }
.section-draw .l1-lead, .section-draw .l1-dim { fill: none; stroke: currentColor; stroke-width: 0.9; opacity: 0.75; }
.section-draw .l1-dot { fill: currentColor; }
.section-draw .l1-veil, .section-draw .l1-veil-out { fill: #002dde; fill-opacity: 0; pointer-events: none; transition: fill-opacity 0.35s ease; }
.section-draw .l1-sel { fill: none; stroke: #fff; stroke-width: 1.6; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.section-draw.l1-eng.focus .tier:not(.on) { opacity: 1; }
.section-draw.l1-eng.focus .tier:not(.on) .l1-veil { fill-opacity: 0.66; }
.section-draw.l1-eng.focus .l1-veil-out { fill-opacity: 0.5; }
.section-draw.l1-eng .tier.on .l1-sel { opacity: 1; }
.section-draw.l1-eng .tier.on .hl { fill: rgba(255, 255, 255, 0.05); }
.section-draw .sec-label { transition: opacity 0.35s ease; }
.section-draw.l1-eng.focus .tier:not(.on) .sec-label, .section-draw.l1-eng.focus .tier:not(.on) .l1-lead, .section-draw.l1-eng.focus .tier:not(.on) .l1-dot { opacity: 0.4; }

/* the aqueduct of computers, once engraved: the stone is drawn below; the water, the token, the checks, the
   labels and the computers' states stay live above it */
.shard .sh-ln, .shard .sh-hair { transition: opacity 0.6s ease; }
.shard.l1-eng .sh-ln, .shard.l1-eng .sh-hair { opacity: 0; }
.shard.l1-eng .rep-box { fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, 0); }
.shard.l1-eng .rep-line { opacity: 0; transition: opacity 0.3s; }
.shard.l1-eng .rep.on .rep-box { fill: #fff; stroke: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.75)); }
.shard.l1-eng .rep.on .rep-line { opacity: 0.9; stroke: var(--arc); }
.shard.l1-eng .rep.off { opacity: 1; }
.shard.l1-eng .rep.off .rep-box { fill: rgba(0, 45, 222, 0.74); stroke: rgba(255, 255, 255, 0.85); stroke-dasharray: 4 4; }
.section-draw.l1-narrow .sec-label { font-size: 20px; }
.section-draw.l1-narrow .sec-cap { font-size: 17px; }
.section-draw.l1-narrow .l1-lead, .section-draw.l1-narrow .l1-dim { stroke-width: 1.6; }
/* ---------- end lower1 ---------- */

/* ---------- lower2: engraved medallions, the viaduct band, the open book, the doorway, the footer cornice ---------- */
.ben.l2-card { padding-top: 70px; }
.l2-emb { display: block; width: min(100%, 232px); aspect-ratio: 1; height: auto; margin: 0 auto 6px; opacity: 0; transition: opacity 1s ease; }
.l2-emb.l2-on { opacity: 1; }
.l2-band { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.l2-band-light { position: absolute; left: 0; top: 0; width: 100%; height: 0; display: block; pointer-events: none; }
.l2-band { opacity: 0; transition: opacity 1.2s ease; }
.l2-band.l2-on { opacity: 1; }
.l2-speed-on .speed-canvas { opacity: 0; transition: opacity 1.2s ease; }
.l2-speed-done .speed-canvas { display: none; }
.l2-book { width: min(100%, 460px); margin: 0 auto; }
.l2-book-cv { display: block; width: 100%; aspect-ratio: 460 / 270; height: auto; opacity: 0; transition: opacity 1.1s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, #000 76%, transparent 100%); }
.l2-book-cv.l2-on { opacity: 1; }
.l2-door { width: 100%; max-width: 520px; margin-bottom: 4px; }
.l2-door-cv { display: block; width: 100%; aspect-ratio: 400 / 270; height: auto; opacity: 0; transition: opacity 1.1s ease;
  -webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 46%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 62% 72% at 50% 46%, #000 60%, transparent 100%); }
.l2-door-cv.l2-on { opacity: 1; }
.footer.l2-footer { position: relative; padding-top: calc(56px + var(--l2-frieze-h, 50px)); }
.l2-frieze { position: absolute; left: 0; top: 0; width: 100%; height: var(--l2-frieze-h, 50px); display: block; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.l2-frieze.l2-on { opacity: 1; }
.speed.l2-speed { height: clamp(540px, 84vh, 800px); }
.l2-band { -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }

/* ---------- choice: the engraved fence and arcade (js/engrave/choice.js) ---------- */
.ch-host { position: relative; }
.ch-canvas { position: absolute; left: 0; top: 0; display: block; max-width: none; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.ch-canvas.ch-on { opacity: 1; }
.morph { transition: opacity 0.8s ease; }
.morph.ch-eng { opacity: 0; }
@media (max-width: 700px) {
  /* on a phone the plate is shown taller than the old line drawing and cropped at its sides, so the gate and the
     middle arch read; its sides fade out rather than stopping hard */
  .ch-host .morph { height: min(38vh, 92vw); max-height: none; }
  .ch-host .ch-canvas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
}
/* ---------- end choice ---------- */

/* ---------- the community: each network with its figure (index.html #join; figures in js/common.js community()) ---------- */
.community { display: grid; gap: clamp(22px, 3vw, 34px); margin-bottom: clamp(72px, 11vh, 132px); }
.community-head { display: grid; gap: 10px; }
.community-head .eyebrow { color: var(--on-night-soft); }
.community-line { margin: 0; font: 400 clamp(2.2rem, 4.6vw, 3.6rem)/1 var(--f-display); letter-spacing: -0.005em; color: var(--white); text-wrap: balance; }
.community-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.community-list li { display: flex; }
.cm { flex: 1; display: grid; grid-template-rows: auto auto 1fr; gap: 24px; padding: 18px 18px 16px; color: var(--white); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.cm:hover, .cm:focus-visible { background: var(--white); color: var(--arc); box-shadow: none; }
.cm-top { display: flex; align-items: center; gap: 10px; font: 600 0.95rem var(--f-body); letter-spacing: 0.01em; }
.cm-mark { width: 18px; height: 18px; flex: none; }
.cm-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cm-fig[hidden] { display: none; }
.cm-n { font: 700 clamp(2.1rem, 3.3vw, 3rem)/1 var(--f-body); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cm-unit { font: 500 0.95rem var(--f-body); color: var(--on-night-soft); }
.cm-handle { align-self: end; font: 500 0.82rem var(--f-body); color: var(--on-night-soft); overflow-wrap: anywhere; }
.cm:hover .cm-unit, .cm:hover .cm-handle, .cm:focus-visible .cm-unit, .cm:focus-visible .cm-handle { color: inherit; }
/* Discord's live count: a small light that breathes while people are online */
.cm-online { color: var(--white); }
.cm:hover .cm-online, .cm:focus-visible .cm-online { color: inherit; }
.cm-online::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: cm-breathe 2.4s ease-in-out infinite; }
@keyframes cm-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .cm-online::before { animation: none; } }
@media (max-width: 980px) {
  /* two above three, so no tile is left alone on a row */
  .community-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .community-list li { grid-column: span 2; }
  .community-list li:nth-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 560px) {
  /* a list: the network and its handle on the left, the figure on the right */
  .community-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .community-list li, .community-list li:nth-child(-n+2) { grid-column: auto; }
  .cm { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 14px; padding: 14px 16px; align-items: center; }
  .cm-top { grid-column: 1; grid-row: 1; }
  .cm-handle { grid-column: 1; grid-row: 2; }
  .cm-fig { grid-column: 2; grid-row: 1 / span 2; align-items: flex-end; align-self: center; gap: 2px; }
  .cm-handle { align-self: start; }
  .cm-n { font-size: 1.9rem; }
  .cm-unit { font-size: 0.82rem; }
}
/* ---------- end community ---------- */

/* The home page has no thin upside-down-U outlines (TJ, 30 Sep 2026): the two containers it shares with the business page
   are plain hairline panels here; consulting.html styles its own in business.css. */
.join-form { border-radius: 0; padding-top: clamp(30px, 3.6vw, 44px); }
.p-step span { width: 32px; height: 32px; padding-top: 0; border-radius: 0; }