.s-method-hero{
  
  --mh-head-pad: var(--sp-8);

  
  --mh-clear     : calc(var(--nav-h) + var(--mh-head-pad) + var(--sp-6));
  --mh-clear-fade: var(--sp-10);
  --mh-floor     : calc(var(--mh-ink-h) + var(--sp-10));
  --mh-floor-fade: var(--sp-8);

  
  --mh-ink-h     : max(var(--sp-11), 30svh);

  min-height:100svh;
  display:flex;
  align-items:stretch;
  padding-top:calc(var(--nav-h) + var(--mh-head-pad));
  padding-bottom:var(--sp-8);
}

.s-method-hero__inner{
  --mh-air-head: var(--sp-7);
  --mh-air-fall: minmax(var(--sp-10), 1fr);

  flex:1 1 auto;
  width:100%;
  display:grid;
  grid-template-rows:auto var(--mh-air-head) auto var(--mh-air-fall) auto;
  row-gap:0;
}
.s-method-hero__head{ grid-row:1; }
.s-method-hero__h   { grid-row:3; }
.s-method-hero__low { grid-row:5; }

.s-method-hero .plate{
  
  --mh-knock:linear-gradient(to bottom,
    transparent 0,
    transparent var(--mh-clear),
    var(--ink-1000) calc(var(--mh-clear) + var(--mh-clear-fade)),
    var(--ink-1000) calc(100% - var(--mh-floor) - var(--mh-floor-fade)),
    transparent calc(100% - var(--mh-floor)));

  position:absolute;
  inset:0;
  z-index:var(--z-field);
  overflow:hidden;
  pointer-events:none;
  background-color:var(--bg);
  
  background-image:
    linear-gradient(to bottom,
      var(--bg) 0,
      var(--bg) var(--mh-clear),
      transparent calc(var(--mh-clear) + var(--mh-clear-fade))),
    radial-gradient(84% 56% at 68% 14%, var(--paper-300) 0%, transparent 76%);
  background-repeat:no-repeat;
}

.s-method-hero .plate::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-field);
  background-image:
    radial-gradient(var(--line-on-paper-strong) var(--hair), transparent var(--hair)),
    radial-gradient(var(--line-on-paper-strong) var(--hair), transparent var(--hair));
  background-size:
    var(--tick)     var(--tick),
    var(--baseline) var(--baseline);
  background-position:center top;
  
  -webkit-mask-image:
    radial-gradient(112% 98% at 74% 20%, var(--ink-1000) 0%, var(--ink-1000) 18%, transparent 76%),
    var(--mh-knock);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(112% 98% at 74% 20%, var(--ink-1000) 0%, var(--ink-1000) 18%, transparent 76%),
    var(--mh-knock);
          mask-composite:intersect;
}

.s-method-hero .plate::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-field);
  background-image:
    radial-gradient(var(--line-on-paper-strong) var(--hair), transparent var(--hair));
  background-size:var(--baseline) var(--baseline);
  background-position:center top;
  
  -webkit-mask-image:
    radial-gradient(230% 100% at 100% 6%,
      transparent 0%, transparent 42%, var(--ink-1000) 50%, transparent 60%),
    var(--mh-knock);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(230% 100% at 100% 6%,
      transparent 0%, transparent 42%, var(--ink-1000) 50%, transparent 60%),
    var(--mh-knock);
          mask-composite:intersect;
}

.s-method-hero .brk{
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-6);
}
.s-method-hero .brk__rule{ align-self:center; }

.s-method-hero__h{
  max-width:none;
  margin:0;
  font-size:min(var(--fs-hero), 12vw);
}
.s-method-hero__h .reveal--line{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}

.s-method-hero__low{
  position:relative;
}

.s-method-hero__rule--low{
  margin-bottom:var(--sp-6);
}

.s-method-hero__rule--low.rule--tick-signal::before{
  width:var(--spine);
  height:var(--sp-5);
  top:calc((var(--sp-5) - var(--hair)) / -2);
}

@property --ink-x{ syntax:"<number>"; inherits:true; initial-value:0.5; }
@property --ink-y{ syntax:"<number>"; inherits:true; initial-value:0.5; }
@property --ink-lit{ syntax:"<number>"; inherits:true; initial-value:0; }

.mh__ink{
  

  
  --ink-r: var(--sp-11);

  
  transition:--ink-lit var(--dur-2) var(--ease-out);

  position:relative;
  z-index:var(--z-content);
  isolation:isolate;
  overflow:hidden;

  background:var(--bg);
  color:var(--fg);

  min-height:var(--mh-ink-h);
  padding:var(--sp-7) var(--sp-7) var(--sp-8);

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--sp-7);
}

.mh__ink::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-base);
  pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle var(--ink-r)
      at calc(var(--ink-x) * 100%) calc(var(--ink-y) * 100%),
      color-mix(in srgb, var(--fg) calc(var(--ink-lit) * 8%), transparent) 0%,
      transparent 78%),
    linear-gradient(94deg,
      transparent 38%,
      color-mix(in srgb, var(--fg) calc(7% - var(--ink-lit) * 7%), transparent) 47%,
      color-mix(in srgb, var(--fg) calc(7% - var(--ink-lit) * 7%), transparent) 53%,
      transparent 62%);
  background-size:100% 100%, 300% 100%;
  background-position:0 0, 100% 0;
}

.mh__ink.is-lit,
.mh__ink.is-on{ --ink-lit:1; }

.mh__ink:focus-visible{
  outline:var(--state-focus-width) solid var(--focus);
  outline-offset:var(--state-focus-offset);
}

.mh__said,
.mh__unsaid{
  position:relative;
  z-index:var(--z-content);
  margin:0;
}

.mh__said{
  font-size:var(--fs-lede);
  line-height:var(--lh-lede);
  max-width:none;
  padding-bottom:var(--sp-5);
  border-bottom:var(--hair) solid var(--line);
}

.mh__unsaid{
  font-size:var(--fs-chapter);
  max-width:none;
  text-wrap:balance;
  
  color:var(--fg);
}

html:not(.no-js) .mh__ink.is-in::before{
  animation:mh-ink-wash calc(var(--dur-4) * 2) var(--ease-out) var(--dur-3) both;
}

@keyframes mh-ink-wash{
  from{ background-position:0 0, 100% 0; }
  to  { background-position:0 0,  62% 0; }
}

@media (prefers-reduced-motion: reduce){
  .mh__ink::before{ display:none !important; }
}

@media (forced-colors: active){
  .mh__ink::before{ display:none; }
}

@media (max-width: 1100px){
  .mh__ink{
    padding:var(--sp-6) var(--sp-6) var(--sp-7);
    gap:var(--sp-6);
  }
  .mh__said{ padding-bottom:var(--sp-4); }
}

@media (max-width: 760px){
  .s-method-hero{
    --mh-head-pad: var(--sp-7);
    
    --mh-clear-fade: var(--sp-9);
    padding-top:calc(var(--nav-h) + var(--mh-head-pad));
    padding-bottom:var(--sp-7);
  }
  .s-method-hero__inner{
    
    --mh-air-head: minmax(var(--sp-6), 0.9fr);
    --mh-air-fall: minmax(var(--sp-6), 1fr);
  }
  .s-method-hero .brk{ gap:var(--sp-4); }
  .s-method-hero__rule--low{ margin-bottom:var(--sp-5); }

  
  .s-method-hero .plate::before{
    -webkit-mask-image:
      radial-gradient(140% 88% at 62% 16%, var(--ink-1000) 0%, var(--ink-1000) 20%, transparent 72%),
      var(--mh-knock);
            mask-image:
      radial-gradient(140% 88% at 62% 16%, var(--ink-1000) 0%, var(--ink-1000) 20%, transparent 72%),
      var(--mh-knock);
  }
  .s-method-hero .plate::after{
    -webkit-mask-image:
      radial-gradient(260% 92% at 100% 8%,
        transparent 0%, transparent 40%, var(--ink-1000) 48%, transparent 58%),
      var(--mh-knock);
            mask-image:
      radial-gradient(260% 92% at 100% 8%,
        transparent 0%, transparent 40%, var(--ink-1000) 48%, transparent 58%),
      var(--mh-knock);
  }

  .mh__ink{
    --ink-r: var(--sp-10);
    padding:var(--sp-5) var(--sp-5) var(--sp-6);
    gap:var(--sp-5);
  }
  .mh__said{ padding-bottom:var(--sp-4); }
}

@media (max-height: 820px){
  .s-method-hero{
    --mh-head-pad  : var(--sp-7);
    
    --mh-clear-fade: var(--sp-9);

    padding-top:calc(var(--nav-h) + var(--mh-head-pad));
    padding-bottom:var(--sp-7);
  }
  .s-method-hero__inner{
    --mh-air-head: var(--sp-6);
    --mh-air-fall: minmax(var(--sp-6), 1fr);
  }
  .s-method-hero__rule--low{ margin-bottom:var(--sp-5); }
}