/* ============================================================
   METHOD OBJECTS — a belief you can touch.
   Two rows of the Method section carry a small object beside
   the paragraph: two keys that do the same job, one answering
   under the finger and one answering late; a list with one
   half-lit item that gets cut. The last row, On
   AI, opens its longer answer the way an answer gets written.
   Ink ground, bone and its alpha steps, no colour (the
   keyboard ring is the site's own, teal, as on every control).
   The first object is built by home-method.js.
   Without JS the objects are absent; with reduced motion they
   still answer, but nothing moves on its own and every change
   is a cut. No object changes its own outer size, so nothing
   around it ever shifts.
   ============================================================ */

.mo {
  position: relative;
  margin-top: 26px;
  max-width: 420px;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (scripting: none) { .mo { display: none; } }

.mo button {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left;
}
.mo button:focus-visible { outline: 2px solid var(--crew); outline-offset: 3px; }
.mo__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Heading first, across the row; then the paragraph on the left and the
   object on the right, where the row was empty. */
#method .gripe--obj > div { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  #method .gripe--obj > div {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 392px);
    column-gap: clamp(36px, 5vw, 84px);
    align-items: start;
  }
  #method .gripe--obj > div > .lm,
  #method .gripe--obj > div > .gripe__t { grid-column: 1 / -1; }
  .mo { margin-top: 5px; max-width: none; }
}
@media (max-width: 680px) {
  .mo { max-width: none; margin-top: 22px; }
}

/* ---------- iv · the same key, twice ----------
   Two round keys, each counting its own presses. They look the same and
   they do the same. The left one answers the finger: it sinks as it is
   touched, fills from the point of contact, and the number rolls over as
   it is let go. The right one has no pressed state at all and counts 0.6 s
   late, so a second press lands as a second count. */

.pr { position: relative; display: flex; gap: clamp(14px, 6%, 26px); }
.mo .pr__k {
  position: relative; isolation: isolate;
  flex: 1 1 0; min-width: 0; max-width: 150px;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  cursor: pointer;
  touch-action: pan-y;
  overflow: hidden;
}
.pr__f {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 50%;
  background: var(--bone);
  clip-path: circle(0% at var(--px, 50%) var(--py, 50%));
}
.pr__n {
  position: relative; z-index: 1;
  display: block; overflow: hidden;
  height: 1.5em; min-width: 2.4ch;
  font-size: clamp(3rem, 4.6vw, 4.1rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #fff;
  mix-blend-mode: difference;
}
.pr__d { display: block; }
/* the key that answers */
.pr__k--a { transition: transform 0.55s cubic-bezier(0.3, 1.9, 0.45, 1), box-shadow 0.2s linear; }
.pr__k--a .pr__f { transition: clip-path 0.5s var(--ease); }
.pr__k--a.is-down { transform: scale(0.9); transition: transform 0.09s ease-out, box-shadow 0.2s linear; }
.pr__k--a.is-down .pr__f { clip-path: circle(142% at var(--px, 50%) var(--py, 50%)); transition: clip-path 0.3s var(--ease); }
@media (hover: hover) { .pr__k--a:hover { box-shadow: inset 0 0 0 1.5px var(--bone); } }
.pr__k--a .pr__d { transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.45, 1); }
.pr__k--a .pr__d + .pr__d { position: absolute; left: 0; right: 0; top: 0; }
.pr__d.is-out { transform: translateY(-105%); transition: transform 0.26s var(--ease-io) !important; }
.pr__d.is-in { transform: translateY(105%); transition: none !important; }

/* the fingertip of the one demo move */
.pr__ring, .dc__ring {
  position: absolute; left: 0; top: 50%; z-index: 3;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(239, 238, 233, 0.9);
  background: rgba(239, 238, 233, 0.22);
  pointer-events: none;
  visibility: hidden;
}
.pr__ring.is-on, .dc__ring.is-on { visibility: visible; animation: mo-press 0.9s var(--ease-io) 1 both; }
@keyframes mo-press {
  0% { transform: scale(1.5); opacity: 0; }
  30%, 55% { transform: scale(0.82); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ---------- vi · the half-lit one gets cut ---------- */

.mo-cut { --ch: 34px; }
.ct {
  list-style: none; margin: 0; padding: 0;
  height: calc(var(--ch) * 5);
  display: flex; flex-direction: column;
}
/* Strength is weight here: the list waits at 500 and half ink, and the four
   that stay grow to the weight of the name at the top of the page. */
.ct__it {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center;
  font-size: clamp(1.45rem, 2vw, 1.8rem); letter-spacing: -0.03em; line-height: 1;
  font-weight: 500;
  color: rgba(239, 238, 233, 0.44);
  transition: color 0.2s linear, font-weight 0.5s var(--ease), flex-grow 0.5s var(--ease);
}
.ct.is-cut .ct__it { color: var(--bone); font-weight: 800; transition-delay: calc(var(--k) * 70ms + 140ms), calc(var(--k) * 70ms + 140ms), 0s; }
.ct__it--half { overflow: hidden; font-weight: 300; }
.mo .ct__b {
  display: flex; align-items: center; gap: 14px;
  width: 100%; height: 100%;
  cursor: pointer;
}
.ct__ww { position: relative; display: block; }
.ct__w {
  position: relative; display: block;
  color: transparent;
  opacity: 0.42;
  animation: mo-flicker 3.4s steps(1, end) infinite;
}
/* the word is two halves from the start, so the cut can part them */
.ct__w::before, .ct__w::after {
  content: attr(data-t);
  position: absolute; left: 0; top: 0;
  color: var(--bone);
  transition: transform 0.14s var(--ease);
}
.ct__w::before { clip-path: inset(-20% -6% 49.6% -6%); }
.ct__w::after { clip-path: inset(49.6% -6% -30% -6%); }
@keyframes mo-flicker {
  0%   { opacity: 0.42; }
  41%  { opacity: 0.2; }
  44%  { opacity: 0.42; }
  47%  { opacity: 0.14; }
  52%  { opacity: 0.38; }
  78%  { opacity: 0.24; }
  81%  { opacity: 0.42; }
}
.ct__ln {
  position: absolute; left: -8px; right: -8px; top: 50%;
  height: 2px; margin-top: -1px;
  background: var(--bone);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.16s var(--ease-io);
}
.ct__p {
  flex: none;
  padding: 4px 11px 5px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; line-height: 1.3;
  text-transform: uppercase;
  color: var(--bone);
  transition: background 0.24s var(--ease), color 0.24s var(--ease);
}
.ct__b:hover .ct__p { background: var(--bone); color: var(--ink); }

.ct.is-hint .ct__ln { transform: scaleX(0.42); }
.ct.is-cutting .ct__ln { transform: scaleX(1); }
.ct.is-cutting .ct__p { visibility: hidden; }
.ct.is-cutting .ct__w { animation: none; }
.ct.is-cutting .ct__w::before, .ct.is-cutting .ct__w::after { transition-delay: 0.16s; }
.ct.is-cutting .ct__w::before { transform: translateX(-8px); }
.ct.is-cutting .ct__w::after { transform: translateX(8px); }
.ct.is-cut .ct__it--half { flex-grow: 0.0001; visibility: hidden; transition: flex-grow 0.5s var(--ease), visibility 0s linear 0.5s; }

/* ---------- vii · the longer answer, asked and written ----------
   The disclosure is a line somebody has typed and is about to send: a
   question, a caret, the round send key. Opened, the answer is written into
   place word by word, once, in about a second, and then it is plain text. The
   key shows a square while it writes and a cross once it is there. Without JS
   or with reduced motion it is a plain details element: open, closed. */

.ai__ask {
  display: flex; align-items: center; gap: 12px;
  width: min(100%, 430px); height: 54px;
  margin-top: 24px; padding: 0 8px 0 22px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  transition: border-color 0.24s var(--ease);
}
.ai summary:hover .ai__ask { border-color: var(--bone); }
.ai__q {
  flex: 1 1 auto; min-width: 0;
  font-size: 16.5px; font-weight: 400; letter-spacing: -0.01em; line-height: 1;
  color: var(--bone);
  white-space: nowrap;
}
.ai__q::after {
  content: ""; display: inline-block;
  width: 2px; height: 1.2em; margin-left: 4px;
  vertical-align: -0.24em;
  background: var(--bone);
  animation: ai-caret 1.1s steps(1, end) infinite;
}
@keyframes ai-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
.ai[open] .ai__q { color: var(--mute); }
.ai[open] .ai__q::after { display: none; }
.ai__go {
  position: relative; flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bone); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--bone);
  transition: transform 0.4s var(--ease);
}
.ai summary:active .ai__go { transform: scale(0.88); transition-duration: 0.08s; }
.ai[open] .ai__go { background: none; color: var(--bone); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.ai.is-writing .ai__go { background: var(--bone); color: var(--ink); box-shadow: inset 0 0 0 1px var(--bone); }
.ai__i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; visibility: hidden; }
.ai:not([open]) .ai__i--send,
.ai[open]:not(.is-writing) .ai__i--close,
.ai.is-writing .ai__i--stop { visibility: visible; }

.ai.is-live .ai__body { position: relative; overflow: hidden; }
.ai.is-live .ai__w { position: relative; opacity: 0; }
.ai.is-live .ai__w.is-on { opacity: 1; }
.ai.is-live .ai__w.is-head::after {
  content: ""; position: absolute; left: 100%; top: 0.08em;
  width: 0.5em; height: 1.1em; margin-left: 0.22em;
  background: var(--bone);
}

/* ---------- phone: the object sits under the paragraph, full width, low ---------- */

@media (max-width: 680px) {
  .mo-cut { --ch: 36px; }
  .ai__ask { width: 100%; }
}

/* ---------- reduced motion: nothing moves by itself, changes are cuts ---------- */

@media (prefers-reduced-motion: reduce) {
  .dc__ring.is-on, .pr__ring.is-on { animation: none !important; visibility: hidden; }
  .mo .pr__k, .pr__f, .pr__k--a .pr__f, .pr__d,
  .ct__it, .ct.is-cut .ct__it, .ct.is-cut .ct__it--half,
  .ct__ln, .ct__w, .ct__w::before, .ct__w::after, .ct__p,
  .ai__q::after, .ai__go, .ai__ask {
    transition: none !important;
    animation: none !important;
  }
}